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

1 可以选择任何日期

<input id="txtDate" class="Wdate" type="text" οnfοcus="WdatePicker()" />

2 今天以前的日期

<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d}'})" />

3 今天以后的日期

<input type="text" class="Wdate" οnfοcus="WdatePicker({minDate:'%y-%M-#{%d}'})" />

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

<!--今天以前的日期不包括今天-->
    <input type="text" class="Wdate"     οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" />
    <!--今天以后的日期不包括今天-->
    <input type="text" class="Wdate"     οnfοcus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />

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

<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d}',minDate:'%y-%M-#{%d}'})" />

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

<input id="txtStartDate" type="text" class="Wdate" οnclick="WdatePicker({maxDate:'#F{$dp.$D(/'txtEndDate/',{d:-1})}'})" />
    <input id="txtEndDate" type="text" class="Wdate" οnclick="WdatePicker({minDate:'#F{$dp.$D(/'txtStartDate/',{d:1})}'})" />

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

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

<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d}',    minDate:'%y-%M-#{%d-7}'})" />
    <!--选择今天以后7天的日期-->
    <input type="text" class="Wdate" οnfοcus="WdatePicker({minDate:'%y-%M-#{%d}',    maxDate:'%y-%M-#{%d+7}'})" />

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

<input id="txtB" type="text"  class="Wdate" οnclick="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" οnfοcus="var d5222=$dp.$('txtEnd');
    WdatePicker({onpicked:function(){txtEnd.focus();},maxDate:'#F{$dp.$D(/'txtEnd/')}'})" />
    <input id="txtEnd" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'#F{$dp.$D(/'txtBegin/')}'})" />

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

<!--给文本加上class=Wdate 文本框的右边就有日历小图标-->
    <input class="Wdate" type="text" οnfοcus="WdatePicker()" />
    <!--禁止文本框输入-->
    <input class="Wdate" type="text" οnfοcus="WdatePicker({readOnly:true})" />
    <!--禁止文本框输入-->
    <input class="Wdate" type="text" οnfοcus="WdatePicker({isShowClear:false})" />
    <!--当然几种功能也能放到一起-->
    <input class="Wdate" type="text" οnfοcus="WdatePicker({readOnly:true,isShowClear:false})" />

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

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

http://blog.csdn.net/oec2003/archive/2009/12/12/4991415.aspx

My97日历控件用法相关推荐

  1. IE11浏览器中的My97日历控件刷新后无法打开问题解决办法

    IE11浏览器中的My97日历控件刷新后无法打开问题解决办法:(谷歌浏览器下正常.IE11失效) 解决办法: 1:找到WdatePicker.js 2:将$crossFrame:true 改为$cro ...

  2. WdatePicker日历控件用法

    一.详细使用方法可參考官方文档:http://www.my97.net/dp/demo/resource/main.asp 二.工作中的样例: 1.日期选择后,时间自己主动填充为当前时间 代码: &l ...

  3. My97 DatePicker日历控件在火狐或IE下打不开

    title: My97 DatePicker日历控件在火狐或IE下打不开 date: 2018-02-05 22:29:07 categories: javascript tags: Firefox ...

  4. php获取WdatePicker值,WdatePicker日历控件使用方法

    wdatepicker日历控件是个非常好用的js日历控件,这搜集了一下他的使用方法,这个js可以在这里下载:http://l4.yunpan.cn/lk/QEVi5KP4CqgJ2 1. 跨无限级框架 ...

  5. 公司--页面调用日期控件 WdatePicker日历控件使用方法

    <td style="width:120px;"><input type="text" name="lpd_<%=prodTa ...

  6. WdatePicker日历控件使用方法(转)

    转自:http://www.cnblogs.com/weixing/archive/2011/08/15/2139431.html WdatePicker日历控件使用方法 1. 跨无限级框架显示 无论 ...

  7. WdatePicker日历控件使用方法

    2019独角兽企业重金招聘Python工程师标准>>> 1.跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控 ...

  8. 控件用法-WdatePicker 隐藏各按钮

    转自:http://www.cnblogs.com/huangw/archive/2013/01/25/2876009.html My97DatePicker是一款非常灵活好用的日期控件.使用非常简单 ...

  9. [前端]WdatePicker日历控件使用方法

    转载地址: http://www.cnblogs.com/yuhanzhong/archive/2011/08/10/2133276.html 1.跨无限级框架显示 无论你把日期控件放在哪里,你都不需 ...

最新文章

  1. Linux下,如何给PHP安装pdo_mysql扩展
  2. 万变不离其宗之海量数据下的算法问题处理思路
  3. jquery源码--merge grep type trim
  4. Flex4学习笔记(二)--语法相关
  5. 游戏用户被锁定后出现的错误提示
  6. 一文带你全面解析postman工具的使用(基础篇)
  7. Nginx初学者指南
  8. java段注释_Java的注释
  9. 如何下载中国卫星地图高清版大图
  10. 大麦网滑块验证码自动识别
  11. Zookeeper,集群管理之独孤求败
  12. Ubuntu 16.04中cartographer安装过程中的troubleshooting,以及demo的实现
  13. Cesium 角度计算
  14. Surface电池寿命延长
  15. 美颜SDK是什么?美颜SDK和美颜APP有什么区别?
  16. restapi是什么意思_网上整理的对于Rest和Restful api的理解
  17. 中位数/平均数/众数/方差/标准差
  18. ezpolt和plot区别_stem与plot的区别
  19. 全球与中国氢化苯乙烯-异戊二烯嵌段共聚物市场现状及未来发展趋势
  20. 计算机网络 华东理工大学 第3章测试

热门文章

  1. [电影]辛德勒的名单
  2. 解决ubuntu 下蓝牙耳机音质不佳问题
  3. micropython开发板有什么用_MicroPython入门:能跑MicroPython开发板大盘点!
  4. python星空画法教程_插画分享|零基础也能画好的星空和夕阳教程继续系列
  5. Python3 单行注释,多行注释,文档注释的用法
  6. 计算机SCI论文重复率需要控制在多少? - 易智编译EaseEditing
  7. python和php什么关系,什么是python?与PHP有什么区别?
  8. 第3章 psql工具
  9. 2020年最好用的手机是哪一款_2020年有哪款5G手机最值得选择?
  10. Yandex浏览器新标签页按钮显示俄文的解决办法