JQuery日历插件My97DatePicker日期范围限制


Posted in Javascript onJanuary 20, 2016

本文实例向大家介绍了JQuery日历插件My97DatePicker日期范围限制的方法,分享给大家供大家参考,具体内容如下

```<input class="Wdate" id="d1" onclick="WdatePicker()" />

JQuery日历插件My97DatePicker日期范围限制

下面重点说明日期范围限制:
1)静态限制
你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围
示例1.1:限制日期的范围是 2012-12-1到2012-12-20

```<input class="Wdate" id="d2" onfocus="WdatePicker({skin:'whyGreen',minDate:'2012-12-1',maxDate:'2012-12-20'})" />

示例1.2:限制日期的范围是 2012-12-4 21:30:00 到 2012-12-4 23:59:30

```<input type="text" id="d3" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2012-12-4 21:30:00',maxDate:'2012-12-4 23:59:30'})" value='2012-12-4 21:30:00'/>

示例1.3:限制日期的范围是 2012年12月 到 2013年12月

```<input type="text" class="Wdate" id="d4" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2012-12',maxDate:'2013-12'})"/>

示例1.4:限制时间的范围是 9:00:00 到 18:30:00

```<input class="Wdate" id="d5" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'9:00:00',maxDate:'18:30:00'})" />

2)动态限制
你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天

格式 说明
%y 当前年
%M 当前月
%d 当前日
%ld 本月最后一天
%H 当前时
%m 当前分
%s 当前秒
{} 运算表达式,如:{%d+1}:表示明天

F{} {}之间是函数可写自定义JS代码
示例2.1:只能选择今天以前的日期(包括今天)

<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

示例2.2:使用了运算表达式 只能选择今天以后的日期(不包括今天)

```<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

示例2.3:只能选择本月的日期1号至本月最后一天

```<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

示例2.4:只能选择今天7:00:00至明天21:00:00的日期

```<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

示例2.5:使用了运算表达式 只能选择 20小时前 至 30小时后 的日期

```<input id="d425" class="Wdate" 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'})"/>

3)脚本自定义限制
系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制
示例3.1: 前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01
从 到

```<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>

```<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>

示例3.2:前面的日期+3天 不能大于 后面的日期

```<input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>

```<input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>

示例3.3:前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3

<input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>

示例3.4:发挥你的JS才能,定义任何你想要的日期限制
自动转到随机生成的一天,当然,此示例没有实际的用途,只是为演示目的

<script>
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script>
<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>

4)无效天限制
可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表周日至周六)
示例4.1:禁用 周六 所对应的日期

```<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

禁用 周六 周日 所对应的日期

```<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

5)无效日期限制
可以使用此功能禁用,所指定的一个或多个日期,只要熟悉正则表达式,可以尽情发挥
用法(正则匹配):
如果你熟悉正则表达式,会很容易理解下面的匹配用法
如果不熟悉,可以参考下面的常用示例
['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
['^2006'] 表示禁用 2006年的所有日期
此外,您还可以使用 %y %M %d %H %m %s 等变量, 用法同动态日期限制 注意:%ld不能使用
['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用 昨天和明天
当然,除了可以限制日期以外,您还可以限制时间
['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意 : 需要 使用 \: )
示例5.1:禁用 每个月份的 5日 15日 25日

```<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

//注意 :'5$' 表示以 5 结尾 注意 $ 的用法

示例5.2:禁用 所有早于2000-01-01的日期

```<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>

//注意:'^19' 表示以 19 开头 注意 ^ 的用法
//当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法

示例5.3:配合min/maxDate使用,可以把可选择的日期分隔成多段

```<input id="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>

示例5.4:min/maxDate disabledDays disabledDates 配合使用 即使在要求非常苛刻的情况下也能满足需求

```<input id="d454" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/>

示例5.5:禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量

```<input id="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>

示例5.6: #F{}也是可以使用的
本示例利用自定义函数 随机禁用0-23中的任何一个小时
打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同

<script>
function randomH(){
//产生一个随机的数字 0-23
var H = Math.round(Math.random() * 23);
if(H<10) H='0'+H;
//返回 '^' + 数字
return '^'+H;
}
</script>
<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>

6)有效日期
使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.
关键属性: opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用
示例6.1:只启用 每个月份的 5日 15日 25日

```<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>

//注意 :'5$' 表示以 5 结尾 注意 $ 的用法

7)特殊天和特殊日期
特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效
关键属性:
specialDays (0至6 分别代表 周日至周六) 用法同无效天
specialDates 用法同无效日期,但是对时分秒无效
示例7.1:高亮每周 周一 周五

```<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>

示例7.2:高亮每月 1号 15号

```<input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
js arguments对象应用介绍
Nov 28 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 #Javascript
js实现图片无缝滚动特效
Mar 19 #Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 #Javascript
学习JavaScript设计模式之观察者模式
Apr 22 #Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 #Javascript
详解javascript实现自定义事件
Jan 19 #Javascript
JS拖拽组件学习使用
Jan 19 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python中Apriori算法实现讲解
2017/12/10 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
python实现AES加密与解密
2019/03/28 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
助学感谢信范文
2015/01/21 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书