My97DatePicker时间控件使用说明
常规调用:
<input id="date01" type="text" onClick="WdatePicker()"/>
<br/>
<br/>
常规调用(在文本框中尾部显示日期图标):
<input id="date02" type="text" class="Wdate" onClick="WdatePicker()"/>
<br/>
<br/>
图标触发(此时只有点击图标才能弹出日期选择框):
<br/>
<input id="iconInvoke" type="text"/>
<img onclick="WdatePicker({el:'iconInvoke'})" src="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">限制日期范围为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>
设置显示周:
<input type="text" onFocus="WdatePicker({readOnly:true, isShowWeek:true})"/>
<br/>
<br/>
开始日期不能大于结束日期,且都不能大于今天:
<input id="data05" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'data06\')||\'new Date()\'}'})"/>
<input id="data06" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'data05\')}',maxDate:new Date()})"/>
<br/>
<br/>
设置只读:
<input id="data05" type="text" onFocus="WdatePicker({readOnly:true})"/>
<br/>
<br/>
设置今天为最大日期:
<input id="data05" type="text" onFocus="WdatePicker({maxDate:new Date()})"/>
<br/>
<br/>
设置今天为最小日期:
<input id="data05" type="text" onFocus="WdatePicker({minDate:new Date()})"/>
<br/>
<br/>
格式化:年月日时分秒:
<input id="data05" type="text" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'})" style="width:350px;"/>
My97DatePicker时间控件使用说明的更多相关文章
- My97DatePicker时间控件在项目中的应用
一.下载My97DatePicker的压缩包My97DatePicker.rar,解压. 注:My97DatePicker最新版本有开发包,项目中使用时删掉,以便节省空间,提高程序的运行效率. 二.在 ...
- My97DatePicker时间控件使用
刚刚工作中遇到一个修改时间空间的bug,顺带学习了My97DatePicker时间空间 网上查到的资料已经很详细: http://www.360doc.com/content/14/0606/11/1 ...
- My97DatePicker 时间控件
<td> <input type="text" id="sendDate" name="sendDate" class=& ...
- My97DatePicker时间控件使用方法
引入css及js <asp:TextBox ID="tb_startTime" runat="server" CssClass="Wdate&q ...
- WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
WdatePicker.js的使用方法 帮助文档 使用说明(时间控件) 4. 日期范围限制 静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致 你可以给通过配 ...
- wdatePicker时间控件的使用
wdatePicker时间控件的使用 1.引用wdatePicker控件的js <seript src="../../js/My97DatePicker/wdatePicker.js& ...
- jquery时间控件
jQuery 时间控件推荐 博客分类: jQuery 时间控件 My97DatePicker My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限 ...
- VB6.0中,DTPicker日期、时间控件不允许为空时,采用文本框与日期、时间控件相互替换赋值(解决方案)
VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...
- [转]一种简单的js时间控件
使用方法: 粘贴代码到文本文档中,文档名称为datetime.js,然后在html文件中引用如下代码即可 <input name="shijian1" id="sh ...
随机推荐
- [POJ3352]Road Construction(缩点,割边,桥,环)
题目链接:http://poj.org/problem?id=3352 给一个图,问加多少条边可以干掉所有的桥. 先找环,然后缩点.标记对应环的度,接着找桥.写几个例子就能知道要添加的边数是桥的个数/ ...
- [HDOJ2586]How far away?(最近公共祖先, 离线tarjan, 并查集)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 这题以前做过…现在用tarjan搞一发…竟然比以前暴力过的慢………… 由于是离线算法,需要Que ...
- Android adb 常用技巧
1.在命令行管理模拟器设备(AVD) list:列出机器上所有已经安装的Android版本和AVD设备 list avd:列出机器上所有已经安装的AVD设备: list target:列出机器上所有已 ...
- JAVA将Excel中的报表导出为图片格式(一)问题背景
如题所示,先抛出一个问题,如何使用JAVA将Excel中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...
- 基于XMPP的即时通信系统的建立(五)— openfire
现决定使用Openfire作为服务端,Openfire采用Java开发,基于XMPP的实时开源协作服务器.单台可支持上万并发用户. Openfire体系结构 Openfire体系由其提供的服务器端.客 ...
- QSettings介绍
简介 QSettings类提供了持久的跨平台应用程序设置. 用户通常期望应用程序记住它的设置(窗口大小.位置等)所有会话.这些信息通常存储在Windows系统注册表,OS X和iOS的属性列表文件中. ...
- struts2中改变struts.xml默认路径
struts2.X配置文件默认存放路径在/WEB-INF/classes目录下,即将struts.xml放在src的目录下. 但是为了方便管理,开发人员把struts.xml放到其他位置,处理方法如下 ...
- Linux shell下批量创建缩略图
一.背景 今天,突然发现手机客户端上的最新新闻缩略图都不显示了,上服务器上看了看, 发现新的新闻图片根本没有生成缩略图. 这套新闻发布系统是很老的程序了,查了一下,问题的原因是不支持png格式的图片, ...
- H.264码流结构解析
from:http://wenku.baidu.com/link?url=hYQHJcAWUIS-8C7nSBbf-8lGagYGXKb5msVwQKWyXFAcPLU5gR4BKOVLrFOw4bX ...
- B树索引和位图索引的区别!
B树索引主键和唯一性约束字段的B树索引,效率几乎和海量数据没有关系. 键值重复率低的字段比较适合使用B树索引. 位图索引键值重复率高的字段比较适合使用位图索引.count.and.or.in这些特定的 ...