jquery Calendar Plugin my97datepicker date range limit

Ext.: http://www.xiongge.club/744.html

My97datepicker is a very good calendar plugin that not only supports multiple invocation modes, but also supports date range restrictions.

The general invocation is simple, as follows:

1	<inputclass="Wdate" id="d1" onclick="WdatePicker()" />

The following highlights the date range limits:

1) Static limit

You can limit the range of dates by configuring MinDate (minimum date), maxdate (maximum date) to a static date value

Example 1.1: The range of restricted dates is 2012-12-1 to 2012-12-20

1	<inputclass="Wdate" id="d2" onfocus="WdatePicker({skin:‘whyGreen‘,minDate:‘2012-12-1‘,maxDate:‘2012-12-20‘})" />

Example 1.2: The range of restricted dates is 2012-12-4 21:30:00 to 2012-12-4 23:59:30

1	<inputtype="text" id="d3" class="Wdate" onfocus="WdatePicker({skin:‘whyGreen‘,dateFmt:‘yyyy-MM-dd HH:mm:ss‘,minDate:‘2012-12-4 21:30:00‘,maxDate:‘2012-12-4 23:59:30‘})" value=‘2012-12-4 21:30:00‘/>

Example 1.3: The range of restricted dates is December 2012 to December 2013

1	<inputtype="text" class="Wdate" id="d4" onfocus="WdatePicker({dateFmt:‘yyyy年M月‘,minDate:‘2012-12‘,maxDate:‘2013-12‘})"/>

Example 1.4: The limit time range is 9:00:00 to 18:30:00

1	<inputclass="Wdate" id="d5" onfocus="WdatePicker({dateFmt:‘H:mm:ss‘,minDate:‘9:00:00‘,maxDate:‘18:30:00‘})" />

2) Dynamic limit

You can use the dynamic variables given by the system, such as%y (current year),%M (current month), and so on to limit the date range, you can also use {} to perform expression operations, such as: {%d+1}: means tomorrow

Dynamic variable Table

format	Description
%y	When the year before
%M	Current month
%d	Current day
%ld	Last day of the month
%H	Current time
%m	Current points
%s	Current seconds
{}	An operation expression, such as: {%d+1}: means tomorrow
#F {}	A function-writable custom JS code between {}

Example 2.1: Only the date before today (including today) can be selected

1	<inputid="d421" class="Wdate" type="text"   onfocus="WdatePicker({skin:‘whyGreen‘,maxDate:‘%y-%M-%d‘})"/>

Example 2.2: Use an op-expression to select only the date after today (excluding today)

1	<inputid="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:‘%y-%M-{%d+1}‘})"/>

Example 2.3: You can only select date 1th this month to the last day of the month

1	<inputid="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:‘%y-%M-01‘,maxDate:‘%y-%M-%ld‘})"/>

Example 2.4: You can only select today from 7:00:00 to tomorrow 21:00:00 date

1	<inputid="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:‘yyyy-M-d H:mm:ss‘,minDate:‘%y-%M-%d 7:00:00‘,maxDate:‘%y-%M-{%d+1} 21:00:00‘})"/>

Example 2.5: Use an op-expression to select only 20 hours ago to 30 hours after the date

1	<inputid="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm‘,minDate:‘%y-%M-%d {%H-20}:%m:%s‘,maxDate:‘%y-%M-%d {%H+30}:%m:%s‘})"/>

3) Script Customization Restrictions

The system provides $DP. $D and $DP. $DV these two APIs to assist you with date arithmetic, and you can do any date limit you want by filling in your custom script in #F {}

Example 3.1: The preceding date cannot be greater than the subsequent date and two dates cannot be greater than 2020-10-01

FromTo

12	<inputid="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:‘#F{$dp.$D(\‘d4312\‘)||\‘2020-10-01\‘}‘})"/><inputid="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:‘#F{$dp.$D(\‘d4311\‘)}‘,maxDate:‘2020-10-01‘})"/>

Example 3.2: The preceding date + 3 days cannot be greater than the subsequent date

FromTo

12	<inputtype="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:‘#F{$dp.$D(\‘d4322\‘,{d:-3});}‘})"/><inputtype="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:‘#F{$dp.$D(\‘d4321\‘,{d:3});}‘})"/>

Example 3.3: The previous date + March 2 days cannot be greater than the subsequent date and the preceding date cannot be greater than 2020-4-3 minus March 2 days after the date cannot be greater than 2020-4-3

FromTo

12	<inputtype="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})}‘})"/><inputtype="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:‘#F{$dp.$D(\‘d4331\‘,{M:3,d:2});}‘,maxDate:‘2020-4-3‘})"/>

Example 3.4: Play your JS ability to define any date limits you want

Automatically go to a randomly generated day, of course, this example has no practical purpose, just for demonstration purposes

12345678910

<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><inputtype="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>

4) Invalid day limit

You can use this feature to disable dates for the Sunday to Saturday, related properties: Disableddays (0 to 6 for Sunday to Saturday, respectively)

Example 4.1: Disable dates for Saturday

1	<inputid="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

Disable dates for Sunday Saturday

1	<inputid="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

5) Invalid date limit

You can use this feature to disable, specify one or more dates, as long as you are familiar with regular expressions, you can play

Usage (regular match):
If you are familiar with regular expressions, it is easy to understand the following matching usages
If you are unfamiliar, you can refer to the following common examples
[' 2008-02-01′, ' 2008-02-29 '] means disabling 2008-02-01 and 2008-02-29
['-.. -01′, ' 2008-02-29 ' = disabled 2008-All months-01 and 2008-02-29
[' 200[0-8]]-02-01′, ' 2008-02-29 '] means disable [2000 to 2008]-02-01 and 2008-02-29
[' ^2006 '] means all dates are disabled for 2006 years

In addition, you can use variables such as%y%M%d%H%M%s, using the same dynamic date limit note:%ld cannot be used
[‘....-.. -01′, '%y-%m-%d ' = Disables all years and the first day of all months and today
['%y-%m-{%d-1} ', '%y-%m-{%d+1} ' means to disable yesterday and tomorrow

Of course, you can limit the time except the date you can limit
[‘....-.. -.. 10\:00\:00 '] means to disable 10 points per day (note: need to use \:)

Example 5.1: Disable 5th 15th 25th for each month

12	<inputid="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:[‘5$‘]})"/>//注意 :‘5$‘ 表示以 5 结尾 注意 $ 的用法

Example 5.2: Disable all dates older than 2000-01-01

123	<inputid="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:[‘^19‘]})"/>//注意:‘^19‘ 表示以 19 开头 注意 ^ 的用法//当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法

Example 5.3: Use with min/maxdate to separate selectable dates into multiple segments

1	<inputid="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate:‘%y-%M-01‘,maxDate:‘%y-%M-%ld‘,disabledDates:[‘0[4-7]$‘,‘1[1-5]$‘,‘2[58]$‘]})"/>

Example 5.4:min/maxdate disableddays disableddates fits your needs even in demanding situations

1	<inputid="d454" type="text" class="Wdate" onFocus="WdatePicker({minDate:‘%y-%M-01‘,maxDate:‘%y-%M-%ld‘,disabledDates:[‘0[4-7]$‘,‘1[1-5]$‘,‘2[58]$‘],disabledDays:[1,3,6]})"/>

Example 5.5: Disable variables such as%y%M%d%H%M%s at all times in the first one hours and after one hours

1	<inputid="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘,disabledDates:[‘%y-%M-%d {%H-1}\:..\:..‘,‘%y-%M-%d {%H+1}\:..\:..‘]})"/>

Example 5.6: #F {} is also available

This example randomly disables any one hour in 0-23 with a custom function
Open the hour selection box and you'll notice that one hours are disabled and each disabled hour is different

12345678910

< script > function Randomh () { //produce a random number 0-23 var H = Math.Round (Math.random () *); if (h< 10 //return ' ^ ' + number return ' ^ ' +h; </SCRIPT> < input  type= "text" class= "wdate" id= "d456" Onfocus= "Wdatepicker ({datefmt: ' HH:mm:ss ', disableddates:[' #F {randomh ()} '})"/>

6) Effective Date

Using invalid dates makes it easy to disable unavailable dates, but the effective Date feature works well when you only need to enable a small portion of the date.

Key attribute: Opposite default is False, when true, invalid date becomes valid date, this property has no effect on invalid days, special days

Example 6.1: Only the 5th 15th 25th of each month is enabled

12	<inputid="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:[‘5$‘]})"/>//注意 :‘5$‘ 表示以 5 结尾 注意 $ 的用法

7) Special days and special dates

The usage of special days and special dates is exactly the same as the completely invalid day and the invalid date, but the opposite property is not valid for it

Key attributes:

Specialdays (0 to 6 for Sunday to Saturday respectively) usage of the same invalid day

Specialdates usage is the same as invalid date, but not valid for seconds

Example 7.1: Highlighting weekly Monday Friday

1	<inputid="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>

Example 7.2: Highlight number 15th per month 1th

1	<inputid="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:[‘....-..-01‘,‘....-..-15‘]})"/>

jquery Calendar Plugin my97datepicker date range limit