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

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

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

复制代码 代码如下:

```<input 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" 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" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2012-12',maxDate:'2013-12'})"/>


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

复制代码 代码如下:

```<input 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 type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>


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

复制代码 代码如下:

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


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

复制代码 代码如下:

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


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

复制代码 代码如下:

```<input 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 type="text"/>


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

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

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

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

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

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwdwz.html