JQuery kalendar plug-in My97DatePicker julat tarikh limit_jquery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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