My97DatePicker{js日历插件}

2022-08-23 12:47:01

VS自带了一个日历控件：Calendar，但是它有一个缺陷：即在选择，隐藏，显示的时候都会引起回传

Calendar控件的一些用法：
    取值：Calendar1.SelectedDate.ToShortDateString(); //YYYY-MM-DD
          Calendar1.SelectedDate.Month; //从1开始，即几月即是几，不用+1

本文主角：My97DatePicker
用法：
1.复制控件文件夹至项目根目录
2.将文件夹下的WdatePicker.js文件引入页面(直接拖入页面的<head>标签内)
3.在页面中添加一个text，在其源码中增加CssClass="Wdate"和onclick="WdatePicker()"
eg:
<input class="Wdate" type="text" onclick="WdatePicker()"/>
效果图：

上面的样式都可以在其提供的css文件中修改
资源下载：
http://www.jb51.net/jiaoben/18012.html#down

=================================
重要参数
【startDate】：可以指定日历展示的时候，定位在哪一天，默认是当天；可以进行个性化设置比如把当天+1作为日历展示的时候指向的日期；  startDate:'%y-%M-#{%d}'--》当天 startDate:'%y-%M-#{%d+1}'--》当天加1

【dateFmt】：可以指定要显示的内容的格式 'yyyy-MM-dd'显示年月日   在text中以 yyyy-MM-dd的方式呈现，如果是 yyyy年MM月dd日则text里面以 yyyy年MM月dd日的形式呈现；
如果加上 HH:mm:ss 则还会显示时间，

【maxDate】：最大日期
【minDate】：最小日期
'%y-%M-#{%d}' 表示当天日期

以另外的text的日期为准操作，比如两个text，开始日期不能大于结束日期
'#F{$dp.$D(\'txtEndDate\',{d:-1})}' 使用其他text的日期内容为限制txtEndDate是那个text的id标签

<input type="text" id="myStart" value="" class="Wdate" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'myEnd\',{d:-1})}',startDate:'%y-%M-#{%d}',dateFmt:'yyyy年MM月dd日'})" />

d:0表示最小值可以和myStart文档框的时间相同，d:-1表示最大值比 myEnd文本框的值小1天
属性的顺序，minDate/MaxDate----startDate----dateFmt

My97相信大家都不陌生，应该是我所见过的最强大的一个日历控件了，最近的项目中也比较多地用到了此控件，而且项目中经常会有不同时间范围的需求，在此列出一些比较常用的日期范围格式的设置，尽管在My97的官方文档中有很详细的介绍，正是因为很详细所以查找起来不是很方便。

1 可以选择任何日期

2 今天以前的日期

3 今天以后的日期

上面设置今天以前和今天以后的日期用到的是maxDate和minDate，%y-%M-#{%d} 表示的是当天的日期，如果想今天以前或是今天以后的日期不包括今天，设置表达式中的d减去1或是加上1即可，如下：

<input type="text" class="Wdate"     onfocus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" />
    
    <input type="text" class="Wdate"     onfocus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />

4 同样如果只能选择今天设置maxDate和minDate都为今天就行，不过这个不常用到

5 两个日期框，结束日期大于开始日期

<input style="width: 75px" placeholder="开始时间" type="text"

name="beginintime" value="" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endintime\')}',startDate:'%y-%M-#{%d+1}',dateFmt:'yyyy-MM-dd'})"

id="beginintime" />

<input style="width: 75px" placeholder="结束时间" type="text"

name="endintime" value="" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'beginintime\')}',startDate:'%y-%M-%dd',dateFmt:'yyyy-MM-dd'})"

id="endintime" />

如果将结束日期框的onclick里的{d:1} 改成{d:0}，就表示结束日期可以选择和开始日期同一天

6 今天以前或以后N天的日期

7 两个日期框，结束日期大于开始日期，并且都是今天以后的日期

8 两个日期框，第一个选择后触发第二个弹出

常用的日期范围选择先就总结这么多，还有些的功能比如给文本框加个日历小图标、禁止文本框输入、禁止日历控件清空等也是很常用的，代码如下：

<input class="Wdate" type="text" onfocus="WdatePicker()" />
    
    <input class="Wdate" type="text" onfocus="WdatePicker({readOnly:true})" />
    
    <input class="Wdate" type="text" onfocus="WdatePicker({isShowClear:false})" />
    
    <input class="Wdate" type="text" onfocus="WdatePicker({readOnly:true,isShowClear:false})" />

这里只是列出了些常用的功能，要想了解更多还是去看官方文档吧。至于日期范围的选择，看懂了那些代码就可以很容易地根据需求进行更改了。

注：上面又涉及到开始日期和结束日期两个日期框的，文本框控件必须要有id，这个id函数里面会用到，如果您的开发中使用了Aspnet中的MasterPage，那么文本框的id在生成页面后会改变，类似于：ctl00_ContentPlaceHolder1_txtEndDate，如果还是用文本框本身的id是不会起作用的，我的做法是查看源文件将生成的id复制到函数里。

码农公寓

相关文章