My97DatePicker的使用
来源:互联网 发布:知乎分享你刚编的故事 编辑:程序博客网 时间:2024/05/28 22:11
My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官方文档中有很详细的介绍,正是因为很详细所以查找起来不是很方便。
1 可以选择任何日期
<input id="txtDate" class="Wdate" type="text" onfocus="WdatePicker()" />
2 今天以前的日期
<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}'})" />
3 今天以后的日期
<input type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-#{%d}'})" />
上面设置今天以前和今天以后的日期用到的是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都为今天就行,不过这个不个日期框,结束日期大于开始日期
<input id="txtStartDate" type="text" class="Wdate" onclick="WdatePicker({maxDate:'#F{$dp.$D(/'txtEndDate/',{d:-1})}'})" /> <input id="txtEndDate" type="text" class="Wdate" onclick="WdatePicker({minDate:'#F{$dp.$D(/'txtStartDate/',{d:1})}'})" />
如果将结束日期框的onclick里的{d:1} 改成{d:0},就表示结束日期可以选择和开始日期同一天
6 今天以前或以后N天的日期
<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}', minDate:'%y-%M-#{%d-7}'})" /> <!--选择今天以后7天的日期--> <input type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-#{%d}', maxDate:'%y-%M-#{%d+7}'})" />
7 两个日期框,结束日期大于开始日期,并且都是今天以后的日期
<input id="txtB" type="text" class="Wdate" onclick="WdatePicker({minDate:'%y-%M-#{%d}', maxDate:'#F{$dp.$D(/'txtE/',{d:-1})}'})"/> <input id="txtE" type="text" class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(/'txtB/',{d:1})|| /'%y-%M-#{%d+2}/'}'})"/>
8 两个日期框,第一个选择后触发第二个弹出
<input id="txtBegin" class="Wdate" type="text" onfocus="var d5222=$dp.$('txtEnd'); WdatePicker({onpicked:function(){txtEnd.focus();},maxDate:'#F{$dp.$D(/'txtEnd/')}'})" /> <input id="txtEnd" class="Wdate" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(/'txtBegin/')}'})" />
9 选定日期后执行事件
<input id="d11" type="text" onFocus="WdatePicker({onpicking:function(dp){alert('您选定的时间为:'+dp.cal.getNewDateStr())}})"/>
常用的日期范围选择先就总结这么多,还有些的功能比如给文本框加个日历小图标、禁止文本框输入、禁止日历控件清空等也是很常用的,代码如下:
<!--给文本加上class=Wdate 文本框的右边就有日历小图标--> <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复制到函数里。
- My97DatePicker 的简单使用
- My97DatePicker的使用
- my97DatePicker的基本使用
- My97DatePicker控件的使用
- My97DatePicker的简单使用
- 时间控件My97DatePicker的使用
- 使用My97DatePicker 遇到的问题
- My97DatePicker日历控件的使用
- 时间控件My97DatePicker的使用
- My97DatePicker 时间插件的使用
- My97DatePicker日期控件的使用
- My97DatePicker日期控件的使用
- My97DatePicker日期控件的使用
- 时间控件My97DatePicker的使用
- 关于My97DatePicker插件的使用:
- 日历组件My97DatePicker的使用
- My97DatePicker日期插件的使用
- My97DatePicker日期控件的使用
- 画饼状图二
- db2创建表空间
- JavaWeb开发之HttpServletResponse接口和常用方法 (跟着龙哥学JavaWeb)
- Beautiful Soup 4库--python2.x(学习日记)
- 论Android应用进程长存的可行性
- My97DatePicker的使用
- APP中透明新手引导页面的实现
- xib的简单介绍与使用
- 进程—内存段机制
- 关于appstore多语言版本,不可不看!
- 图形算法 - 模糊函数比较,Blur Function Compare。
- 15.4:泛型化方法
- [Unity3D]Unity3D游戏开发之鼠标旋转、缩放实现3D物品展示
- 快启动U盘启动盘制作工具安装番茄花园win7系统教程