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;"/>

时间: 2024-10-11 04:00:25

My97DatePicker时间控件使用说明的相关文章

My97DatePicker时间控件

之前一直使用easyui控件无法实现只显示yyyy年MM月格式或者显示yyyyMM格式.相比My97DatePicker时间控件更为强大些. 只要在页面引用如下脚本,WdatePicker.js内部会引用其它js. <script type="text/javascript" src="<%=root%>/Common/My97DatePicker/WdatePicker.js"></script> 然后在input中编写oncl

My97DatePicker时间控件使用指南

My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件:     <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 3.页面使用两个方式:     常规调用:  <input id="d11" type="tex

My97DatePicker时间控件使用

My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件:     <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> 3.页面使用两个方式:     常规调用:  <input id="d11" type="tex

My97DatePicker时间控件 JQuery UI - datepicker 用法

·概述 日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 官方示例地址:http://jqueryui.com/demos/datepicker/ 同时,你还可以通过键盘控制它: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月或最后一次打开的日期 ctrl+left/right - 上一天.下一天 ctrl+up/down - 上一周.

My97DatePicker时间控件在项目中的应用

一.下载My97DatePicker的压缩包My97DatePicker.rar,解压. 注:My97DatePicker最新版本有开发包,项目中使用时删掉,以便节省空间,提高程序的运行效率. 二.在MyEclipse中创建web project名为Wdate,将解压后的My97DatePicker文件拷贝到WebRoot目录下. 三.jsp页面中引入WdatePicker.js即可. <script  language="javascript" type="text/

wdatePicker时间控件的使用

1.引用wdatePicker控件的js <seript src="../../js/My97DatePicker/wdatePicker.js"> 2.为了使结束时间大于开始时间,或者不能选择大于当前日期的值 这里用表达式进行了控制:控制条件如下: 开始时间控件: <input id="StartDate" type="text" onfocus=“WadePicker({skin:‘whyGreen’,maxDate:‘#F

vue小荔枝,时间控件,动态按月份增减。

依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个月,一个季度,半年,一年. 如果结束日期不变,那么默认递增即可,如果结束日期改变了,以变更的日期递增月份. html结构: <div id="app"> <div class="col-md-5 form-inline"> <div cla

jquery-ui日期时间控件实现

日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:http://jqueryui.com/ 日期控件js:jquery-ui.js 相应函数及默认属性设置:function Datepicker() 时间控件官网网址:http://plugins.jquery.com/jt.timepicker/ 时间控件js:jquery-ui-timepicker-

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): request.get(URL).then(成功回调函数,失败回调函数); 第一个回调函数是成功的,参数用response:(也可以用其他的) 第二个回调函数是失败的,参数用error:(也可以用其他的) 注: ①读取本地比较简单,直接填写本地的url即可: ②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python.和