Maison > Article > interface Web > 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
.```c497a33d8112adf7039c76f5cf8ee6b8
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
peuvent être sélectionnées
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
5)无效日期限制 示例5.2:禁用 所有早于2000-01-01的日期 示例5.3:配合min/maxDate使用,可以把可选择的日期分隔成多段 示例5.4:min/maxDate disabledDays disabledDates 配合使用 即使在要求非常苛刻的情况下也能满足需求 示例5.5:禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量 示例5.6: #F{}也是可以使用的 6)有效日期 7)特殊天和特殊日期 示例7.2:高亮每月 1号 15号 以上就是本文的全部内容,希望对大家的学习有所帮助。
可以使用此功能禁用,所指定的一个或多个日期,只要熟悉正则表达式,可以尽情发挥
用法(正则匹配):
如果你熟悉正则表达式,会很容易理解下面的匹配用法
如果不熟悉,可以参考下面的常用示例
['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 结尾 注意 $ 的用法
```<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
//注意:'^19' 表示以 19 开头 注意 ^ 的用法
//当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法
本示例利用自定义函数 随机禁用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()}']})"/>
使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.
关键属性: opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用
示例6.1:只启用 每个月份的 5日 15日 25日
```<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>
//注意 :'5$' 表示以 5 结尾 注意 $ 的用法
特殊天和特殊日期的用法跟完全无效天和无效日期完全相同,但是opposite属性对其无效
关键属性:
specialDays (0至6 分别代表 周日至周六) 用法同无效天
specialDates 用法同无效日期,但是对时分秒无效
示例7.1:高亮每周 周一 周五