JQuery-Kalender-Plug-in My97DatePicker Datumsbereich limit_jquery

Das Beispiel in diesem Artikel führt Sie in die Datumsbereichseinschränkungsmethode des JQuery-Kalender-Plug-Ins My97DatePicker ein und teilt es Ihnen als Referenz mit. Der spezifische Inhalt ist wie folgt:

```

Im Folgenden werden die Datumsbereichseinschränkungen hervorgehoben:
1) Statische Einschränkungen
Sie können den Datumsbereich einschränken, indem Sie minDate (Mindestdatum) und maxDate (Höchstdatum) als statische Datumswerte konfigurieren
Beispiel 1.1: Der eingeschränkte Datumsbereich ist 1.12.2012 bis 20.12.2012

Code kopieren Der Code lautet wie folgt:

```

Beispiel 1.2: Der eingeschränkte Datumsbereich ist 2012-12-4 21:30:00 bis 2012-12-4 23:59:30

Code kopieren Der Code lautet wie folgt:

```

Beispiel 1.3: Der eingeschränkte Datumsbereich ist Dezember 2012 bis Dezember 2013

Code kopieren Der Code lautet wie folgt:

```

Beispiel 1.4: Der begrenzte Zeitbereich ist 9:00:00 bis 18:30:00

Code kopieren Der Code lautet wie folgt:

```

2) Dynamische Einschränkungen
Sie können den Datumsbereich durch vom System bereitgestellte dynamische Variablen einschränken, z. B. %y (aktuelles Jahr), %M (aktueller Monat) usw. Sie können {} auch verwenden, um Ausdrucksoperationen auszuführen, z. B.: {%d 1 }: bedeutet Morgen

Formatbeschreibung
%y aktuelles Jahr
%M aktueller Monat
%d aktueller Tag
%ld Letzter Tag des Monats
%H Gegenwartsform
%m aktuelle Punktzahl
%s aktuelle Sekunde
{} Operationsausdruck, wie zum Beispiel: {%d 1}: bedeutet morgen

F{}{} ist eine Funktion, die benutzerdefinierten JS-Code schreiben kann
Beispiel 2.1: Es können nur Daten vor dem heutigen Tag (einschließlich heute) ausgewählt werden

Code kopieren Der Code lautet wie folgt:

Beispiel 2.2: verwendet einen Operationsausdruck. Es können nur Datumsangaben nach dem heutigen Tag ausgewählt werden (ausgenommen heute)

Code kopieren Der Code lautet wie folgt:

```

Beispiel 2.3: Nur ​​die Daten vom 1. bis zum letzten Tag dieses Monats können ausgewählt werden

Code kopieren Der Code lautet wie folgt:

```

Beispiel 2.4: Nur ​​Termine von 7:00:00 Uhr heute bis 21:00:00 Uhr morgen

können ausgewählt werden

Code kopieren Der Code lautet wie folgt:

```

Beispiel 2.5: verwendet einen Operationsausdruck und kann nur Daten von vor 20 Stunden bis 30 Stunden später auswählen

Code kopieren Der Code lautet wie folgt:

```

3) Einschränkungen bei der Skriptanpassung
Das System bietet zwei APIs, $dp.$D und $dp.$DV, um Sie bei Datumsoperationen zu unterstützen. Darüber hinaus können Sie auch tun, was Sie wollen, indem Sie Ihr benutzerdefiniertes Skript in #F{} eingeben 🎜>
Beispiel 3.1: Das vorherige Datum darf nicht nach dem folgenden Datum liegen und kein Datum darf nach dem 01.10.2020 liegen Von bis

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

Beispiel 3.2: Das vorherige Datum 3 Tage darf nicht größer sein als das folgende Datum

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

Beispiel 3.3: Das vorherige Datum März und 2 Tage darf nicht größer sein als das folgende Datum und die vorherigen Daten dürfen nicht größer als 2020-4-3 minus März und 2 sein Tage des folgenden Datums Das Datum darf nicht größer als 2020-4-3 sein

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

Beispiel 3.4: Nutzen Sie Ihre JS-Talente, um beliebige Datumsbeschränkungen zu definieren Gehen Sie automatisch zu einem zufällig generierten Tag. Dieses Beispiel hat natürlich keinen praktischen Nutzen, sondern dient nur zu Demonstrationszwecken

<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) Ungültiges Tageslimit Mit dieser Funktion können Sie die Daten für Sonntag bis Samstag deaktivieren. Zugehörige Attribute: „disabledDays“ (0 bis 6 stehen jeweils für Sonntag bis Samstag)

Beispiel 4.1: Deaktivieren Sie das Datum für Samstag

Code kopieren Der Code lautet wie folgt:

```

Deaktivieren Sie die Daten für Samstag und Sonntag

Code kopieren Der Code lautet wie folgt:

```

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) Hari dan tarikh istimewa
Penggunaan hari istimewa dan tarikh istimewa adalah sama seperti hari tidak sah sepenuhnya dan tarikh tidak sah, tetapi atribut penentangan tidak sah untuknya
Atribut utama:
Hari istimewa (0 hingga 6 masing-masing mewakili Ahad hingga Sabtu) penggunaan adalah sama seperti hari tidak sah
Penggunaan specialDates adalah sama dengan tarikh tidak sah, tetapi ia tidak sah untuk jam, minit dan saat
Contoh 7.1: Sorotan Isnin Jumaat

Salin kod Kod adalah seperti berikut:

```

Contoh 7.2: Serlahkan tarikh 1 dan 15 setiap bulan

Salin kod Kod adalah seperti berikut:

```

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.