Wdatepicker.js How to use the Help document use description (Time control) * Reprint

4. Date Range Restrictions
Static limit
Note: Date formats must be consistent with REALDATEFMT and REALTIMEFMT
You can limit the range of dates by configuring MinDate (minimum date), maxdate (maximum date) to a static date value

Example 4-1-1 the range of restricted dates is 2006-09-10 through 2008-12-20

<input id= "d411" class= "wdate" type= "text" onfocus= "Wdatepicker ({skin: ' Whygreen ', mindate: ' 2006-09-10 ', MaxDate: ' 2008-12-20 '}) "/>

Example 4-1-2 the range of restricted dates is 2008-3-8 11:30:00 to 2008-3-10 20:59:30

<input type= "text" class= "wdate" id= "d412" onfocus= "Wdatepicker ({skin: ' Whygreen ', datefmt: ' Yyyy-mm-dd HH:mm:ss ', MinDate: ' 2008-03-08 11:30:00 ', maxdate: ' 2008-03-10 20:59:30 '} ' value= ' 2008-03-09 11:00:00 '/>

Example 4-1-3 the range of restricted dates is February 2008 through October 2008

<input type= "text" class= "wdate" id= "d413" onfocus= "Wdatepicker ({datefmt: ' yyyy year m month ', MinDate: ' 2008-2 ', MaxDate: ' 2008-10 '}) "/>

Example 4-1-4 the range of restricted dates is 8:00:00 to 11:30:00

<input type= "text" class= "wdate" id= "d414" onfocus= "Wdatepicker ({datefmt: ' H:mm:ss ', mindate: ' 8:00:00 ', maxDate: ' 11:30:00 '}) "/>

Dynamic throttling
Note: Date formats must be consistent with REALDATEFMT and REALTIMEFMT
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 #{} for expression operations, such as: #{%d+1}: Means tomorrow

Dynamic variable Table

Format description
%y when the year before last
%M Current Month
%d Current day
%ld last day of the month
%H Current Time
%m Current points
%s Current seconds
#{} expression, such as: #{%d+1}: Means tomorrow
#F {} {} is a function-writable custom JS code

Example 4-2-1 can only select dates prior to today (including today)

<input id= "d421" class= "wdate" type= "text" onfocus= "Wdatepicker ({skin: ' Whygreen ', maxdate: '%y-%m-%d '})"/>

Example 4-2-2 uses an op-expression to select only the date after today (excluding today)

<input id= "d422" class= "wdate" type= "text" onfocus= "Wdatepicker ({mindate: '%y-%m-#{%d+1} '})"/>

Example 4-2-3 can only select date 1th this month to the last day of the month

<input id= "d423" class= "wdate" type= "text" onfocus= "Wdatepicker ({mindate: '%y-%m-01 ', maxdate: '%y-%m-%ld '})"/>

Example 4-2-4 can only select a date from today 7:00:00 to tomorrow 21:00:00

<input id= "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 4-2-5 using an op-expression can only select a date from 20 hours ago to 30 hours

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

Script Customization Restrictions
Note: Date formats must be consistent with REALDATEFMT and REALTIMEFMT
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 4-3-1 the preceding date cannot be greater than the subsequent date and two dates cannot be greater than 2020-10-01
The contract is valid from
<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 '}) "/>

Attention:
Date formats must be the same for two dates

$DP. $ is equivalent to the document.getelementbyidx_x function.
So why is the "use \" inside? That is because "and" are used by the peripheral function, so use the escape character \, otherwise it will prompt JS syntax error.
So when you use it elsewhere, be careful to change the ' to ' or ' to use.

#F {$dp. $D (\ ' d4312\ ') | | \ ' 2020-10-01\ '} indicates that the 2020-10-01 value is used as the maximum value when d4312 is empty

Example 4-3-2 the previous date + 3 days cannot be greater than the subsequent date
Date from to
<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})" />

Use $DP. $D function to add the value in the Date box, plus the defined date difference:
Two parameters: id={character type} The ID value of the text box to be processed, obj={object type} date Difference
Date Difference usage:
Attribute Y,m,d,h,m,s, respectively, represents the day of the month and seconds
Such as
is empty, it is the direct value, not the difference (the parameters in the example 4-3-1 are empty)
{M:5,d:7} represents five months 7 days
{y:1,d:-3} represents 1 years less than 3 days
{d:1,h:1} means more than 1 hours a day

Example 4-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
Staying dates from
<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 '}) "/>

Attention:
#F {$dp. $D (\ ' d4332\ ', {m:-3,d:-2}) | | $dp. $DV (\ ' 2020-4-3\ ', {m:-3,d:-2})}
Indicates that the value of $DP. $DV (\ ' 2020-4-3\ ', {m:-3,d:-2})} is used as the maximum value when the d4332 is empty.

Use $DP. $DV function to add an explicitly passed-in value, plus a defined date difference:
Two parameters: value={character type} value to be processed, obj={object type} date Difference
Usage is similar to the above $DP. $D, such as $DP. $DV (\ ' 2020-4-3\ ', {m:-3,d:-2}) for 2020-4-3 minus March 2 days

Example 4-3-4 Play your JS ability to define any date limit you want
Automatically go to a randomly generated day, of course, this example has no practical purpose, just for demonstration purposes

<script>
Returns a random date
function Randomdate () {
var Y = + 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}) "/>

Invalid days
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-4-1 disables dates for Saturday

<input id= "d441" type= "text" class= "wdate" onfocus= "Wdatepicker ({disableddays: [6]})"/>

Example 4-4-2 using the Position property to customize the pop-up location

<input id= "d442" type= "text" class= "wdate" onfocus= "Wdatepicker ({disableddays: [0,6]})"/>

Invalid Date
Note: Date formats must be consistent with REALDATEFMT and REALTIMEFMT
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 disable 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 \:)

No more examples, play your regular talent!

Example 4-5-1 Disable 5th 15th 25th for each month

<input id= "d451" type= "text" class= "wdate" onfocus= "Wdatepicker ({disableddates: [' 5$ ']})"/>

Note: ' 5$ ' denotes the usage of $ with 5 end note

Example 4-5-2 Disable all dates older than 2000-01-01

<input id= "d452" type= "text" class= "wdate" onfocus= "Wdatepicker ({disableddates: [' ^19 ']})"/>

Note: ' ^19 ' denotes the use of the ^ with 19 opening notes
Of course, you can use MinDate to implement similar functions here mainly in the usage of demo ^

Example 4-5-3 with Min/maxdate, you can separate selectable dates into multiple segments
This example the available dates for this month are divided into five paragraphs: 1-3 8-10 16-24 26,27 29-month end

<input id= "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 4-5-4 min/maxdate disableddays disableddates can meet demand even in demanding situations

<input id= "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 4-5-5 disables the use of variables such as%y%M%d%H%M%s at all times in the first one hours and after one hours
When the mouse clicks the hour input box, you will find that the time corresponding to the first one hours and the last one hours is gray

<input id= "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}\:. \:..‘] }) "/>

Note:%y%M%d, see dynamic variable table

Example 4-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

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

Valid days and valid dates
Using invalid days and invalid dates makes it easy to disable unavailable dates, but the functionality of effective days and effective dates is perfect when you only need to enable a small number of dates.
Key attribute: Opposite default is False, when true, invalid days and invalid dates become valid days and valid dates

Example 4-6 is only enabled for each month 5th 15th 25th

<input id= "d46" type= "text" class= "wdate" onfocus= "Wdatepicker ({opposite:true, disableddates: [' 5$ ']})"/>

Note: ' 5$ ' denotes the usage of $ with 5 end note

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 4-7-1 highlighting every Monday Friday

<input id= "d471" type= "text" class= "wdate" onfocus= "Wdatepicker ({specialdays: [1,5]})"/>

Example 4-7-2 highlight number 1th, number 15th per month

<input id= "d472" type= "text" class= "wdate" onfocus= "Wdatepicker ({specialdates: [' ....-.. -01 ', ' ....-.. -15 ']}) "/>

Wdatepicker.js How to use the Help document use description (Time control) * Reprint