您的位置:首页 > Web前端 > JavaScript

WdatePicker日历控件使用

2014-04-02 17:40 260 查看
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})"
 
显示效果:



 设置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

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  控件 日历 javascript