JQuery日曆外掛My97DatePicker日期範圍限制_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:

```

範例2.3：只能選擇本月的日期1號至本月最後一天

複製程式碼 程式碼如下:

程式碼如下:``

範例2.4：

只能選擇今天7:00:00至明天21:00:00的日期

複製程式碼

程式碼如下: 程式碼如下:

``

範例2.5：使用了運算表達式 只能選擇 20小時前 至 30小時後 的日期

複製程式碼

程式碼如下:

程式碼如下:
``

3）腳本自訂限制
系統提供了$dp.$D和$dp.$DV這兩個API來輔助你進行日期運算,此外你還可以透過在#F{} 中填入你自訂的腳本,做任何你想做的日期限制

```<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.1：

前面的日期不能大於後面的日期且兩個日期都不能大於 2020-10-01 從 到

```<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.2：

前面的日期+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.3：

前面的日期+3月零2天不能大於後面的日期且前面日期都不能大於2020-4-3減去3月零2天後面日期不能大於2020-4-3

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

範例3.4：

發揮你的JS才能,定義任何你想要的日期限制 自動轉到隨機生成的一天,當然,此範例沒有實際的用途,只是為演示目的

4）無效天限制

可以使用此功能停用週日至週六所對應的日期,相關屬性:disabledDays (0至6 分別代表週日至週六)

範例4.1：

停用 週六 所對應的日期

複製程式碼 程式碼如下:

程式碼如下:

``

停用 週六 週日 所對應的日期

複製程式碼

程式碼如下: 程式碼如下:``

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.