<code class="language-html">WdatePicker[html] view plain copy print?
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  <!-- 它的官网是http://www.my97.net/ -->
<!-- 引入它的js(这里用的是My97.DatePicker.4.72.Release) -->
<!--
My97DatePicker引入到项目中后的目录结构如下
WebRoot  |--js  |  |--My97DatePicker  |  |  |--lang  |  |  |  |--zh-cn.js  |  |  |--skin  |  |  |  |--default  |  |  |  |  |--datepicker.css  |  |  |  |  |--img.gif  |  |  |  |--datePicker.gif  |  |  |  |--WdatePicker.css  |  |  |--calendar.js  |  |  |--config.js  |  |  |--My97DatePicker.htm  |  |  |--WdatePicker.js  -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>  <!-- 下面演示My97DatePicker的一些效果 -->
<font color="blue">常规调用(若想在文本框中尾部显示日期图标，可以设置<input class="Wdate"/>)</font>
<br/>
<input type="text" onClick="WdatePicker()"/>
<br/>
<br/>
<font color="blue">图标触发(此时只有点击图标才能弹出日期选择框)</font>
<br/>
<input id="iconInvoke" type="text"/>
<img onclick="WdatePicker({el:'iconInvoke'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
<br/>
<br/>
<font color="blue">禁止清空(即用户选择完日期后，不能直接在文本框中按detele键删掉或清空，只能重新选择日期)</font>
<br/>
<input type="text" class="Wdate" onFocus="WdatePicker({isShowClear:false, readOnly:true})"/>
<br/>
<br/>
<font color="blue">自定义每周的第一天(4.6新增：设置周一为每周第一天)</font>
<br/>
<input type="text" onfocus="WdatePicker({firstDayOfWeek:1})"/>
<br/>
<br/>
<font color="blue">自定义日期显示格式(这里设置为yyyy-MM-dd HH:mm，这一点和Java相同，还可设置其它的如'yyyy年MM月')</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"/>
<br/>
<br/>
<font color="blue">双月日历功能(4.6新增：可以同时弹出两个月的日历)</font>
<br/>
<input type="text" onfocus="WdatePicker({doubleCalendar:true, dateFmt:'yyyy-MM-dd'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013-09-14到2013-9-20</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'2013-09-14', maxDate:'2013-9-20'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013年9月到2013年10月</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'2013-9', maxDate:'2013-10-31'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为10:00:20到14:30:00</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'HH:mm:ss', minDate:'10:00:20', maxDate:'14:30:00'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013-9-14 10:30到2013-9-15 16:40</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'2013-09-14 10:30', maxDate:'2013-09-15 16:40'})"/>
<br/>
<br/>
<font color="blue">只能选择今天以前的日期(包括今天)</font>
<br/>
<input type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/>
<br/>
<br/>
<font color="blue">只能选择今天以后的日期(不包括今天)(这里使用了My97DatePicker的运算表达式)</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
<br/>
<br/>
<font color="blue">只能选择本月日期的第一天到最后一天</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld'})"/>
<br/>
<br/>
<font color="blue">只能选择今天10:20至明天14:28的日期</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d 10:20', maxDate:'%y-%M-{%d+1} 14:28'})"/>
<br/>
<br/>
<font color="blue">只能选择20个小时前到30个小时后的日期(这里使用了My97DatePicker的运算表达式)</font>
<br/>
<input type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d {%H-20}:%m:%s', maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>
<br/>
<br/>
<font color="blue">后面的日期大于前面的日期，且两个日期都不能大于2020-10-01</font>
<br/>
<input type="text" id="date01" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date02\')||\'2020-10-01\'}'})"/>
到
<input type="text" id="date02" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date01\')}', maxDate:'2020-10-01'})"/>
<br/>
<br/>
<font color="blue">后面的日期最少要比前面的日期大3天</font>
<br/>
<input type="text" id="date03" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date04\',{d:-3});}'})"/>
到
<input type="text" id="date04" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date03\',{d:3});}'})"/>
<br/>
<br/>
<font color="blue">禁用周六日</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/>
<br/>
<br/>
<font color="blue">禁用每月的5日15日25日('5$'表示以5结尾)</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDates:['5$']})"/>
<br/>
<br/>
<font color="blue">禁用所有早于2000-01-01的日期('^19'表示以19开头，可用minDate实现类似功能，这里主要是演示^的用法)</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDates:['^19']})"/>
<br/>
<br/>
<font color="blue">将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末</font>
<br/>
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
<br/>
<br/>
<font color="blue">将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末，并禁用每个周一、三、六</font>
<br/>
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$'], disabledDays:[1,3,6]})"/>
<br/>
<br/>
<font color="blue">禁用前一个小时和后一个小时内所有时间(鼠标点击日期输入框时，你会发现当前时间对应的前一个小时和后一个小时是灰色的)</font>
<br/>
<input type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>
<br/>
<br/>
<form action="servlet/DatePickerServlet" method="POST">  <font color="blue">  只能选择7天以内日期(包括今天)<br/>  注意：假设用户先选择后面日期为后天，然后再选择前面日期，此时前面日期允许选择今天以前的5天<br/>  注意：这是为了将来的编辑用途(比方说这俩日期是一个活动的起止日期，用户有权在发布活动后回来修改日期)  </font>  <br/>  <input type="text" id="startTime" name="startTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', maxDate:'#F{$dp.$D(\'endTime\')}', minDate:'#F{$dp.$D(\'endTime\',{d:-7})||\'%y-%M-%d\'}'})"/>  到  <input type="text" id="endTime" name="endTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', minDate:'#F{$dp.$D(\'startTime\')}', maxDate:'#F{$dp.$D(\'startTime\',{d:7});}'})"/>  <br/>  <br/>  <input type="submit" value="提交活动日期到服务器">
</form>  [html] view plain copy print?
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  <!-- 它的官网是http://www.my97.net/ -->
<!-- 引入它的js(这里用的是My97.DatePicker.4.72.Release) -->
<!--
My97DatePicker引入到项目中后的目录结构如下
WebRoot  |--js  |  |--My97DatePicker  |  |  |--lang  |  |  |  |--zh-cn.js  |  |  |--skin  |  |  |  |--default  |  |  |  |  |--datepicker.css  |  |  |  |  |--img.gif  |  |  |  |--datePicker.gif  |  |  |  |--WdatePicker.css  |  |  |--calendar.js  |  |  |--config.js  |  |  |--My97DatePicker.htm  |  |  |--WdatePicker.js  -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>  <!-- 下面演示My97DatePicker的一些效果 -->
<font color="blue">常规调用(若想在文本框中尾部显示日期图标，可以设置<input class="Wdate"/>)</font>
<br/>
<input type="text" onClick="WdatePicker()"/>
<br/>
<br/>
<font color="blue">图标触发(此时只有点击图标才能弹出日期选择框)</font>
<br/>
<input id="iconInvoke" type="text"/>
<img onclick="WdatePicker({el:'iconInvoke'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
<br/>
<br/>
<font color="blue">禁止清空(即用户选择完日期后，不能直接在文本框中按detele键删掉或清空，只能重新选择日期)</font>
<br/>
<input type="text" class="Wdate" onFocus="WdatePicker({isShowClear:false, readOnly:true})"/>
<br/>
<br/>
<font color="blue">自定义每周的第一天(4.6新增：设置周一为每周第一天)</font>
<br/>
<input type="text" onfocus="WdatePicker({firstDayOfWeek:1})"/>
<br/>
<br/>
<font color="blue">自定义日期显示格式(这里设置为yyyy-MM-dd HH:mm，这一点和Java相同，还可设置其它的如'yyyy年MM月')</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"/>
<br/>
<br/>
<font color="blue">双月日历功能(4.6新增：可以同时弹出两个月的日历)</font>
<br/>
<input type="text" onfocus="WdatePicker({doubleCalendar:true, dateFmt:'yyyy-MM-dd'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013-09-14到2013-9-20</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'2013-09-14', maxDate:'2013-9-20'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013年9月到2013年10月</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'2013-9', maxDate:'2013-10-31'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为10:00:20到14:30:00</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'HH:mm:ss', minDate:'10:00:20', maxDate:'14:30:00'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013-9-14 10:30到2013-9-15 16:40</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'2013-09-14 10:30', maxDate:'2013-09-15 16:40'})"/>
<br/>
<br/>
<font color="blue">只能选择今天以前的日期(包括今天)</font>
<br/>
<input type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/>
<br/>
<br/>
<font color="blue">只能选择今天以后的日期(不包括今天)(这里使用了My97DatePicker的运算表达式)</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
<br/>
<br/>
<font color="blue">只能选择本月日期的第一天到最后一天</font>
<br/>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld'})"/>
<br/>
<br/>
<font color="blue">只能选择今天10:20至明天14:28的日期</font>
<br/>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d 10:20', maxDate:'%y-%M-{%d+1} 14:28'})"/>
<br/>
<br/>
<font color="blue">只能选择20个小时前到30个小时后的日期(这里使用了My97DatePicker的运算表达式)</font>
<br/>
<input type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d {%H-20}:%m:%s', maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>
<br/>
<br/>
<font color="blue">后面的日期大于前面的日期，且两个日期都不能大于2020-10-01</font>
<br/>
<input type="text" id="date01" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date02\')||\'2020-10-01\'}'})"/>
到
<input type="text" id="date02" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date01\')}', maxDate:'2020-10-01'})"/>
<br/>
<br/>
<font color="blue">后面的日期最少要比前面的日期大3天</font>
<br/>
<input type="text" id="date03" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date04\',{d:-3});}'})"/>
到
<input type="text" id="date04" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date03\',{d:3});}'})"/>
<br/>
<br/>
<font color="blue">禁用周六日</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/>
<br/>
<br/>
<font color="blue">禁用每月的5日15日25日('5$'表示以5结尾)</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDates:['5$']})"/>
<br/>
<br/>
<font color="blue">禁用所有早于2000-01-01的日期('^19'表示以19开头，可用minDate实现类似功能，这里主要是演示^的用法)</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDates:['^19']})"/>
<br/>
<br/>
<font color="blue">将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末</font>
<br/>
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
<br/>
<br/>
<font color="blue">将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末，并禁用每个周一、三、六</font>
<br/>
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$'], disabledDays:[1,3,6]})"/>
<br/>
<br/>
<font color="blue">禁用前一个小时和后一个小时内所有时间(鼠标点击日期输入框时，你会发现当前时间对应的前一个小时和后一个小时是灰色的)</font>
<br/>
<input type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>
<br/>
<br/>
<form action="servlet/DatePickerServlet" method="POST">  <font color="blue">  只能选择7天以内日期(包括今天)<br/>  注意：假设用户先选择后面日期为后天，然后再选择前面日期，此时前面日期允许选择今天以前的5天<br/>  注意：这是为了将来的编辑用途(比方说这俩日期是一个活动的起止日期，用户有权在发布活动后回来修改日期)  </font>  <br/>  <input type="text" id="startTime" name="startTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', maxDate:'#F{$dp.$D(\'endTime\')}', minDate:'#F{$dp.$D(\'endTime\',{d:-7})||\'%y-%M-%d\'}'})"/>  到  <input type="text" id="endTime" name="endTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', minDate:'#F{$dp.$D(\'startTime\')}', maxDate:'#F{$dp.$D(\'startTime\',{d:7});}'})"/>  <br/>  <br/>  <input type="submit" value="提交活动日期到服务器">
</form>  </code>

转载：My97DatePicker（WdatePicker）日期控件用法_zhaoqg4919的博客-CSDN博客

My97DatePicker（WdatePicker）日期控件用法相关推荐

  1. WdatePicker 日期控件- 功能及示例

    3. 多语言和自定义皮肤 多语言支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言 语言列表和语言安装说明详见语言配置 示例3-1 多语言 ...

  2. Wdatepicker日期控件的使用指南 (转)

    Wdatepicker日期控件的使用指南 标签: inputclass语言functionstring正则表达式 2012-02-10 15:48 40826人阅读 评论(5) 收藏 举报 分类: J ...

  3. Wdatepicker日期控件的下载和详细使用说明

    一.下载链接 http://www.my97.net/down.asp 二.基本用法示例 (1)第一步,引入JS.下载后文件如下, 解压后,将文件夹里的东西全部复制到项目的文件夹 WdatePicke ...

  4. Wdatepicker日期控件的使用指南

    示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用 示例2-3-3 使用内置参数 示例 2-4-1: 年月日时分秒 示例 2-4-2 时分秒 示例 2-4- ...

  5. WdatePicker日期控件使用与值获取,以及选择日期完毕触发事件

    HTML: <!--引入WdaePicker文件--> <script type="test/javascript" scr="datePicker/W ...

  6. WdatePicker日历控件用法

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

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

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

  8. 在jsp页面中使用My97DatePicker日期控件

    直接看图看代码! My97DatePicker日期控件是一个功能非常强大的日期插件,功能丰富,调用方便,配置也很灵活!至于该日期插件为什么要叫My97DatePicker这个名字呢?这个你们要去问作者 ...

  9. 日期控件My97DatePicker的使用

    一. 简介 1. 简介 目前的版本是:4.8 文档&演示:http://www.my97.net/dp/demo/index.htm 下载:http://www.my97.net/dp/dow ...

最新文章

  1. 在Ubuntu 14.04 64bit上安装Valgrind并检查内存泄露
  2. 在项目中使用react
  3. maven项目project facets中是2.3调整为3.0的解决办法
  4. Visual Studio Styles
  5. k8s Pod亲和性：pod与pod的亲和性
  6. 【转】The underlying connection was closed
  7. qt使用样式表来设置不规则按钮
  8. Boost下载安装编译配置使用指南
  9. java jmx 监控_利用VisualVm和JMX远程监控Java进程
  10. python单元测试框架作用_Python单元测试框架：Pytest简介
  11. iOS Android 上传代码库+持续集成+单元测试
  12. mysql字符串替换_MySQL的字符串替换更新操作
  13. Django 3实战: 仿链家二手房信息查询网(附GitHub源码) - 文末有送书活动啦！
  14. 麦克风阵列技术(转载)
  15. 东芝166打印机装驱动出现inf安装服务段落无效
  16. 晶振外匹配电容应该怎样选取
  17. 一些又用的国内著名期刊
  18. sa-admin 一个简单又强大的后台管理模板
  19. 《Adaptive Unfolding Total Variation Network for Low-Light Image Enhancement》2021ICCV 弱光增强
  20. Ubuntu/Windows配置AlphaPose填坑（亲测有效）

热门文章

  1. Windows7的自述
  2. [CF891E]Lust
  3. 《30天自制操作系统》读书笔记（2）hello, world
  4. 跳槽首选，平均薪资2w+！现在入门快人一步
  5. ac86u格式化jffs_【新手教程】20180828 ASUS固件使用操作指引华硕AC86U
  6. VOL框架学习（一）从零开始搭建项目
  7. 【wp7】简易的语音报时懒人闹钟
  8. matlab通信系统仿真设计课程设计,基于matlab的FM通信系统仿真设计与实现_课程设计报告...
  9. 更换Linux启动logo的总结
  10. 「机器学习速成」嵌套：高维度数据映射到低维度空间