JQuery kalendar plug-in My97DatePicker julat tarikh limit

JQuery kalendar plug-in My97DatePicker julat tarikh limit_jquery

WBOY

Lepaskan： 2016-05-16 15:19:11

asal

1407 orang telah melayarinya

Contoh dalam artikel ini memperkenalkan anda kepada kaedah sekatan julat tarikh pemalam kalendar JQuery My97DatePicker, dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut

```

Yang berikut menyerlahkan sekatan julat tarikh:
1) Sekatan statik
Anda boleh mengehadkan julat tarikh dengan mengkonfigurasi minDate (tarikh minimum) dan maxDate (tarikh maksimum) sebagai nilai tarikh statik
Contoh 1.1: Julat tarikh terhad ialah 2012-12-1 hingga 2012-12-20

Salin kod Kod adalah seperti berikut:

```

Contoh 1.2: Julat tarikh terhad ialah 2012-12-4 21:30:00 hingga 2012-12-4 23:59:30

Salin kod Kod adalah seperti berikut:

```

Contoh 1.3: Julat tarikh terhad ialah Disember 2012 hingga Disember 2013

Salin kod Kod adalah seperti berikut:

```

Contoh 1.4: Julat masa terhad ialah 9:00:00 hingga 18:30:00

Salin kod Kod adalah seperti berikut:

```

2) Sekatan dinamik
Anda boleh mengehadkan julat tarikh melalui pembolehubah dinamik yang diberikan oleh sistem, seperti %y (tahun semasa), %M (bulan semasa), dll. Anda juga boleh menggunakan {} untuk melaksanakan operasi ungkapan, seperti: {%d 1 }: bermaksud Esok

Format Penerangan
%y tahun semasa
%M bulan semasa
%d hari semasa
%ld Hari terakhir dalam bulan
%H tegang semasa
%m markah semasa
%s saat semasa
{} Ungkapan operasi, seperti: {%d 1}: bermaksud esok

F{}{} ialah fungsi yang boleh menulis kod JS tersuai
Contoh 2.1: Hanya tarikh sebelum hari ini (termasuk hari ini) boleh dipilih

Salin kod Kod adalah seperti berikut:

Contoh 2.2: menggunakan ungkapan operasi hanya tarikh selepas hari ini boleh dipilih (tidak termasuk hari ini)

Salin kod Kod adalah seperti berikut:

```

Contoh 2.3: Hanya tarikh dari 1 hingga hari terakhir bulan ini boleh dipilih

Salin kod Kod adalah seperti berikut:

```

Contoh 2.4: Hanya tarikh dari 7:00:00 hari ini hingga 21:00:00 esok

boleh dipilih

Salin kod Kod adalah seperti berikut:

```

Contoh 2.5: menggunakan ungkapan operasi dan hanya boleh memilih tarikh dari 20 jam lalu hingga 30 jam kemudian

Salin kod Kod adalah seperti berikut:

```

3) Sekatan penyesuaian skrip
Sistem ini menyediakan dua API, $dp.$D dan $dp.$DV, untuk membantu anda dalam operasi tarikh Selain itu, anda juga boleh melakukan apa sahaja yang anda mahu dengan mengisi skrip tersuai anda dalam #F{}. 🎜>
Contoh 3.1: Tarikh sebelumnya tidak boleh lebih besar daripada tarikh berikut dan tiada tarikh boleh melebihi 2020-10-01 Dari kepada

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

Salin selepas log masuk

Contoh 3.2: Tarikh sebelumnya 3 hari tidak boleh lebih besar daripada tarikh berikut

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

Salin selepas log masuk

Contoh 3.3: Tarikh Mac dan 2 hari sebelumnya tidak boleh lebih besar daripada tarikh berikut dan tarikh sebelumnya tidak boleh melebihi 2020-4-3 tolak Mac dan 2 hari dari tarikh berikut Tarikh tidak boleh melebihi 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'})"/>

Salin selepas log masuk

Contoh 3.4: Gunakan bakat JS anda untuk menentukan sebarang sekatan tarikh yang anda mahu Secara automatik pergi ke hari yang dijana secara rawak, sudah tentu, contoh ini tidak mempunyai kegunaan praktikal, hanya untuk tujuan demonstrasi

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

Salin selepas log masuk

4) Had hari tidak sah Anda boleh menggunakan fungsi ini untuk melumpuhkan tarikh yang sepadan dengan Ahad hingga Sabtu Atribut berkaitan: disabledDays (0 hingga 6 mewakili Ahad hingga Sabtu)
.
Contoh 4.1: Lumpuhkan tarikh yang sepadan dengan hari Sabtu

Salin kod Kod adalah seperti berikut:

```

Lumpuhkan tarikh yang sepadan dengan Sabtu dan Ahad

Salin kod Kod adalah seperti berikut:

```

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

Salin selepas log masuk

示例5.2：禁用所有早于2000-01-01的日期

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

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

Salin selepas log masuk

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

Salin selepas log masuk

6）有效日期
使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.
关键属性: opposite 默认为false, 为true时,无效日期变成有效日期,该属性对无效天,特殊天不起作用
示例6.1：只启用每个月份的 5日 15日 25日

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

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

Salin selepas log masuk

7) Jours et dates spéciaux
L'utilisation des jours spéciaux et des dates spéciales est exactement la même que celle des jours et des dates complètement invalides, mais l'attribut d'opposition n'est pas valide pour eux
Attributs clés :
L'utilisation des jours spéciaux (0 à 6 représentent respectivement du dimanche au samedi) est la même que celle des jours invalides
L'utilisation de SpecialDates est la même que celle d'une date invalide, mais elle est invalide pendant les heures, les minutes et les secondes
Exemple 7.1 : Surligner lundi vendredi

Copier le code Le code est le suivant :

```

Exemple 7.2 : Sélectionnez le 1er et le 15 de chaque mois

Copier le code Le code est le suivant :

```

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.