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

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

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

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

```

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

peuvent être sélectionnées

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

```

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

Copier le code Le code est le suivant :

```

Désactivez les dates correspondant au samedi et au dimanche

Copier le code Le code est le suivant :

```

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）特殊天和特殊日期
特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效
关键属性:
specialDays (0至6 分别代表 周日至周六) 用法同无效天
specialDates 用法同无效日期,但是对时分秒无效
示例7.1：高亮每周 周一 周五

复制代码 代码如下:

```

示例7.2：高亮每月 1号 15号

复制代码 代码如下:

```

以上就是本文的全部内容，希望对大家的学习有所帮助。

Étiquettes associées：

jquery

source：php.cn

Article précédent：Sujet d'optimisation JavaScript : chargement et exécution, compétences en matière de chargement et de running_javascript Article suivant：Explication détaillée de la méthode jQuery unbind() example_jquery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...

Depuis 2024-04-06 14:54:03

0

2

421

Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...

Depuis 2024-04-05 09:26:49

0

1

1418

Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...

Depuis 2024-04-04 18:40:04

0

1

3528

J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...

Depuis 2024-04-04 17:27:27

0

1

417

Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...

Depuis 2024-04-04 12:53:48

0

1

303

Rubriques connexes

Plus>

• Que sont les plug-ins jquery ?
• Comment faire fonctionner json avec jquery
• Comment supprimer des éléments dans jquery
• Utilisation de la méthode jQuery hover()
• jquery implémente la méthode de pagination
• Qu'est-ce qu'un élément caché dans jquery
• Qu'est-ce qui est mis en évidence dans jquery
• La différence entre la liaison bidirectionnelle vue2 et vue3