JQuery calendar plug-in My97DatePicker date range limit_jquery

The example in this article introduces you to the date range restriction method of the JQuery calendar plug-in My97DatePicker, and shares it with you for your reference. The specific content is as follows

```

The following highlights the date range restrictions:
1) Static restrictions
You can limit the date range by configuring minDate (minimum date) and maxDate (maximum date) as static date values
Example 1.1: The restricted date range is 2012-12-1 to 2012-12-20

Copy code The code is as follows:

```

Example 1.2: The restricted date range is 2012-12-4 21:30:00 to 2012-12-4 23:59:30

Copy code The code is as follows:

```

Example 1.3: The restricted date range is December 2012 to December 2013

Copy code The code is as follows:

```

Example 1.4: The limited time range is 9:00:00 to 18:30:00

Copy code The code is as follows:

```

2) Dynamic restrictions
You can limit the date range through dynamic variables given by the system, such as %y (current year), %M (current month), etc. You can also use {} to perform expression operations, such as: {%d+1}: means tomorrow

Format Description
%y current year
%M current month
%d current day
%ld Last day of the month
%H current tense
%m current score
%s current second
{} Operation expression, such as: {%d+1}: means tomorrow

F{}{} is a function that can write custom JS code
Example 2.1: Only dates before today (including today) can be selected

Copy code The code is as follows:

Example 2.2: uses an operation expression. Only dates after today can be selected (excluding today)

Copy code The code is as follows:

```

Example 2.3: Only the dates from the 1st to the last day of this month can be selected

Copy code The code is as follows:

```

Example 2.4: Only dates from 7:00:00 today to 21:00:00 tomorrow

can be selected

Copy code The code is as follows:

```

Example 2.5: uses an operation expression and can only select dates from 20 hours ago to 30 hours later

Copy code The code is as follows:

```

3) Script customization restrictions
The system provides two APIs, $dp.$D and $dp.$DV, to assist you in date calculations. In addition, you can also do whatever you want by filling in your custom script in #F{}. Date restrictions
Example 3.1: The previous date cannot be greater than the later date and neither date can be greater than 2020-10-01
From to

```<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'})"/>

Example 3.2: The previous date + 3 days cannot be greater than the following date

```<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});}'})"/>

Example 3.3: The previous date + March and 2 days cannot be greater than the following date and the previous dates cannot be greater than 2020-4-3 minus March and 2 days The following date cannot be greater than 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'})"/>

Example 3.4: Use your JS talents to define any date restrictions you want
Automatically go to a randomly generated day, of course, this example has no practical use, just for demonstration purposes

<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) Invalid day limit
You can use this function to disable the dates corresponding to Sunday to Saturday. Related attributes: disabledDays (0 to 6 represent Sunday to Saturday respectively)
Example 4.1: Disable the date corresponding to Saturday

Copy code The code is as follows:

```

Disable the dates corresponding to Saturday and Sunday

Copy code The code is as follows:

```

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使用,可以把可选择的日期分隔成多段

复制代码 代码如下:

```

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

复制代码 代码如下:

```

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

复制代码 代码如下:

```

示例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) Special days and dates
The usage of special days and special dates is exactly the same as completely invalid days and invalid dates, but the opposition attribute is invalid for them
Key attributes:
specialDays (0 to 6 represent Sunday to Saturday respectively) usage is the same as invalid days
The usage of specialDates is the same as invalid date, but it is invalid for hours, minutes and seconds
Example 7.1: Highlight Monday Friday

Copy code The code is as follows:

```

Example 7.2: Highlight the 1st and 15th of each month

Copy code The code is as follows:

```

The above is the entire content of this article, I hope it will be helpful to everyone’s study.