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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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