My97DatePicker（WdatePicker）日期控件用法

其他 2018-10-31 10:57:20 阅读次数: 0 
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>

猜你喜欢

转载自blog.csdn.net/qq_35514348/article/details/80648789
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022