WdatePicker日历控件使用

时间:2022-05-02 18:09:33

WdatePicker日历控件使用

<script type="text/javascript" language="JavaScript"src="JS/WdatePicker.js"></script>

 

<input type="text" id="start_Time"   size="10"   value="2014-11-12"  class="Wdate"

         onfocus="WdatePicker({minDate:'2014.11.1',onclearing:pickedFunc,readOnly:true})"/>

 

<input type="text" id="end_Time"

 

onfocus="WdatePicker({minDate:'#F{$dp.$D(\'start_Time\')||\'2010-10-01\'}',onpicked:pickedFunc,isShowClear:false})"

 

显示效果:

WdatePicker日历控件使用

 设置class="Wdate"即可以出现右侧的日历图标

 

设置日期的可选范围:

minDate:'2014.1.1'

maxDate:'2014.4.1'

还可以将其它的控件的值做为最大最小值,比如上面的

minDate:'#F{$dp.$D(\'start_Time\')||\'2010-10-01\'}' 即将start_Time控件 的值最为最小值,当start_Time没有设定值时,将使用2010-10-01的值

 将最大日期设为当前日期: maxDate:'%y-%M-%d'

 将最大日期设为当前日期前3天  maxDate:'%y-%M-{%d-3}'

  

设置皮肤:skin:'whyGreen'

有两种皮肤,

默认为default,

个人比较喜欢浅绿色的whyGreen

当然也可以自定义 比较简单,请看官网

 

可以在选定日期后进行一些处理,可以使用onpicked:pickedFunc,pickedFunc为js函数

 

可以控件日期是否可以手动修改

readOnly:true 只读

 

可以设置是否显示清空,今天,确定等按钮:

isShowClear:true

isShowToday:true,

isShowOK:true,  

 

其它详见官网 

官网下载:

http://www.my97.net/dp/down.asp