首先要下载该控件的包,下载地址:http://pan.baidu.com/s/1Aa5gk

引用文件
  <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
目录详情

image

常规调用
 <input id="d11" type="text" class="text" onclick="WdatePicker()"  />

image

通过position属性,自定义弹出位置
 <input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:50,top:50}})" />

image

年月日时分秒
<input type="text" id="d241" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="text" />

image

限制日期的范围是 2006-09-10到2008-12-20
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'blueFresh',minDate:'2006-09-10',maxDate:'2008-12-20'})" />

image

 

限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30
  <input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'blue',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" />

 

image

你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天

动态变量表

image

只能选择今天以前的日期(包括今天)
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'green',maxDate:'%y-%M-%d'})"/>

 

image

 

只能选择本月的日期1号至本月最后一天
   <input id="d423" class="Wdate" type="text" onfocus="WdatePicker({skin:'simple',minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

 

image

只能选择今天7:00:00至明天21:00:00的日期

 

<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({skin:'YcloudRed',dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

image

前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01

 

 <input id="d4311" class="Wdate" type="text" onfocus="WdatePicker({skin:'ext',maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})" />
 <input id="d4312" class="Wdate" type="text" onfocus="WdatePicker({skin:'ext',minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})" />

image

 

前面的日期+3天 不能大于 后面的日期
<input type="text" class="Wdate" id="d4321" onfocus="WdatePicker({skin:'simple',maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})" />
<input type="text" class="Wdate" id="d4322" onfocus="WdatePicker({skin:'simple',minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})" />

image

禁用 周六 周日 所对应的日期
<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

image

禁用 每个月份的 5日 15日 25日
<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

image

注意 :'5$' 表示以 5 结尾 注意 $ 的用法

在.NET中使用以上控件只需为控件添加一个runat=”server” 属性即可!

posted on 2017-11-02 14:42  SenFanXie  阅读(5367)  评论(2编辑  收藏  举报