Plug-in de calendrier JQuery My97DatePicker plage de dates limit_jquery

L'exemple de cet article vous présente la méthode de restriction de plage de dates du plug-in de calendrier JQuery My97DatePicker et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

```

Ce qui suit met en évidence les restrictions relatives à la plage de dates :
1) Restrictions statiques
Vous pouvez limiter la plage de dates en configurant minDate (date minimale) et maxDate (date maximale) comme valeurs de date statiques
Exemple 1.1 : La plage de dates restreinte va du 1/12/2012 au 20/12/2012

Exemple 1.2 : La plage de dates restreinte va du 2012-12-4 21:30:00 au 2012-12-4 23:59:30

Exemple 1.3 : La plage de dates restreinte va de décembre 2012 à décembre 2013

Exemple 1.4 : La plage horaire limitée est de 9h00:00 à 18h30:00

2) Restrictions dynamiques
Vous pouvez limiter la plage de dates grâce à des variables dynamiques données par le système, telles que %y (année en cours), %M (mois en cours), etc. Vous pouvez également utiliser {} pour effectuer des opérations d'expression, telles que : {%d 1 } : signifie demain

Description du format
%y année en cours
%M mois en cours
%d jour en cours
%ld Dernier jour du mois
%H temps actuel
%m score actuel
%s seconde actuelle
{} Expression d'opération, telle que : {%d 1} : signifie demain

F{}{} est une fonction qui peut écrire du code JS personnalisé
Exemple 2.1 : Seules les dates antérieures à aujourd'hui (y compris aujourd'hui) peuvent être sélectionnées

Exemple 2.2 : utilise une expression d'opération Seules les dates après aujourd'hui peuvent être sélectionnées (hors aujourd'hui)

Exemple 2.3 : Seules les dates du 1er au dernier jour de ce mois peuvent être sélectionnées

Exemple 2.4 : Seules les dates de 7h00 aujourd'hui à 21h00 demain

Exemple 2.5 : utilise une expression d'opération et ne peut sélectionner que des dates comprises entre 20 heures et 30 heures plus tard

3) Restrictions de personnalisation des scripts
Le système fournit deux API, $dp.$D et $dp.$DV, pour vous aider dans les opérations de date. De plus, vous pouvez également faire ce que vous voulez en remplissant votre script personnalisé dans #F{} Restrictions de date<.>
Exemple 3.1 : La date précédente ne peut pas être supérieure à la date suivante et aucune des deux dates ne peut être supérieure au 01/10/2020 Du au

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

Exemple 3.2 : La date précédente 3 jours ne peut être supérieure à la date suivante

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

Exemple 3.3 : La date précédente de mars et 2 jours ne peut pas être supérieure à la date suivante et les dates précédentes ne peuvent pas être supérieures à 2020-4-3 moins mars et 2 jours de la date suivante La date ne peut être supérieure au 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'})"/>

Exemple 3.4 : Utilisez vos talents JS pour définir les restrictions de dates que vous souhaitez Accédez automatiquement à un jour généré aléatoirement, bien sûr, cet exemple n'a aucune utilité pratique, juste à des fins de démonstration

<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) Limite de jours invalide Vous pouvez utiliser cette fonction pour désactiver les dates correspondant du dimanche au samedi. Attributs associés : DisabledDays (0 à 6 représentent respectivement du dimanche au samedi)

Exemple 4.1 : Désactiver la date correspondant au samedi

```<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 结尾 注意 $ 的用法