My97日历控件常用功能记录

摘要:
1您可以选择任何日期<2今天之前的日期<'%y-%M-#{%d}'})“/>'%y-%M-#{%d-1}'})”/&gt:'%y-%M-#{%d+1}')“/><'%y-%M-#{%d}';'%y-%M-#{%d+7}'”)“/gt:-1})})”/&gt:1})|/'%y-%M-#{%d+2}/'}”)“/&gt:

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 type="text" class="Wdate" 
onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',minDate:'%y-%M-#{%d}'})" />

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

<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/')}'})" />

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

<!--给文本加上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复制到函数里。

转自:http://blog.csdn.net/oec2003/article/details/4991415

免责声明:文章转载自《My97日历控件常用功能记录》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Doskey命令详解PC浏览器播放m3u8下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

bpc 数据处理

UJKT程序:UJO_SQE_TESTBADI:UJ_CUSTOM_LOGIC*XDIM_MEMBERSET Z_ACCOUNT = PL04 *START_BADI PL04_STEP1 WRITE = ON QUERY = ON *END_BADI *定义模型 types:begin of ty_planning, m...

WCF服务最近经常死掉

系统上线后WCF服务最近经常死掉的原因分析总结  前言     最近系统上线完修改完各种bug之后,功能上还算是比较稳定,由于最近用户数的增加,不知为何经常出现无法登录、页面出现错误等异常,后来发现是由于WCF服务时不时的就死掉了。后来就开始分析问题。得到的初步解决方案如下:   1、在Web端调用WCF服务使用后,未释放未关闭导致新的链接无法访问  ...

Django之缓存、信号和图片验证码、ORM性能

一、 缓存 1、 介绍 缓存通俗来说:就是把数据先保存在某个地方,下次再读取的时候不用再去原位置读取,让访问速度更快。 缓存机制图解 2、Django中提供了6种缓存方式   1. 开发调试   2. 内存   3. 文件   4. 数据库   5. Memcache缓存(python-memcached模块)   6. Memcache缓存(pyl...

使用PostgreSQL的bytea字段存读取文件及读取出错问题处理

  PostgreSQL中的bytea字段类型可以以二进制的形式存储数据,这样做的好处就是可以将原本存储在网站目录下的文件存储到数据库中,坏处就是如果文件过多、过大的话,就会导致数据库的数据量大大增加,备份和恢复的时候就会浪费大量的时间,而且数据也有可能会出错。个人觉得,在文件量小的情况下,使用这种存储方式还是很方便的。   言归正传,下面介绍一下使用by...

layui中,同一个页面动态加载table数据表格

效果图: 前端代码: <div class="layui-fluid" id="record-user" hidden="hidden"> <div class="layui-card"> <div class="layui-form" lay-filter="datafile">...

jquery应用图片拖拽排序

最近在研究Interface elements for jQuery(http://interface.eyecon.ro/),此插件封装了一些拖拽效果,并且使用非常简单,能轻松实现拖拽排序、购物车、博客首页排版等UI,所以模仿和讯的图片排序做了一个简单样例: 预览: 代码: <html><head><meta http-e...