Use of jquery date control Wdatepicker

Wdatepicker's official website

First to introduce JS file

<script src= "Resources/my97datepicker/wdatepicker.js" type= "Text/javascript" ></script>
< Script src= "Resources/my97datepicker/wdatepicker.js" type= "Text/javascript" ></script>

Select Start time and end time, and start time is less than end time, end time is greater than start time.

<input class= ' notice-time ' type= ' text ' id= ' starttime ' onclick= ' Wdatepicker  ({datefmt: ' Yyyy-mm-dd HH:mm:ss ', MaxDate: ' #F {$dp. $D (\ ' noticeendtime\ ')} '}] ">

<input type=" text "class=" notice-time "id= ' Noticeendtime '  onclick= "Wdatepicker ({datefmt: ' Yyyy-mm-dd HH:mm:ss ', mindate: ' #F {$dp. $D (\ ' starttime\ ')} '})"/> 

 $ (document). On ("click", ". Start-time", function (e) {
		 var rowid = $ (e.target). Parents ("tr"). attr ("rowID");;
		 Wdatepicker ({  
             el:e.target,  
             autopickdate:true,  
             datefmt: "Yyyy-mm-dd HH:mm:ss",
             maxdate: ' #F {$dp. $D (\ ' Noticeendtime ' + rowID + ')} '
	 }); Click event
 $ (document) on the end date. On ("click", ". End-time", function (e) {
		 var rowid = $ (e.target). Parents ("tr"). attr ( "rowID");;
		 Wdatepicker ({  
             el:e.target,  
             autopickdate:true,  
             datefmt: "Yyyy-mm-dd HH:mm:ss",
             mindate: ' #F {$ DP. $D (\ ' starttime ' + rowID + ')} '});  
 

Example 4-1-1 limit date range from 2006-09-10 to 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 limit date range from 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 limit date range from February 2008 to 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 limit date is from 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 '}) '/>

Format basic information:

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

Example 4-2-1 can only select today's previous date (including today)
<input id= "d421" class= "wdate" type= "text" onfocus= "Wdatepicker ({skin: ' Whygreen ', maxdate: '%y-%m-%d '})"/>

Example 4-2-2 uses an operator expression to select only today's date (excluding today)
<input id= "d422" class= "wdate" type= "text" onfocus= "Wdatepicker ({mindate: '%y-%m-#{%d+1} '})"/>

Example 4-2-3 can only select the date of this month 1th to the last day of this 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 dates from 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 uses an operator expression to select a date from 20 hours to 30 hours ago
<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 '}) '/>

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

Example 4-3-1 the previous date cannot be greater than the following date and two dates cannot be greater than 2020-10-01
The validity of the contract is 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:
Two date formats must be the same

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

#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 following 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 the $DP. $D function to add a value in a date box, plus a defined date difference:
Two parameters: id={character type} ID value of the text box to be processed, obj={object type} date Difference
Is empty, represents a direct value, not a difference (the parameter in the example 4-3-1 is empty)
{M:5,d:7} represents five months 7 days
{y:1,d:-3} means 3 days less than 1 years
{d:1,h:1} means 1 more hours a day

Example 4-3-3 Previous date + March 2 days can not be greater than the later date and the previous date can not be greater than 2020-4-3 minus March 2 days later date cannot be greater than 2020-4-3
Check-in date from to
<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 d4332 is empty

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

Example 4-3-4 play with your JS to define any date limit you want
Automatically go to a randomly generated day, of course, this example has no actual purpose, but 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 Day
You can use this feature to disable dates from 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 by Position property, customizing the pop-up location
<input id= "d442" type= "text" class= "Wdate" onfocus= wdatepicker ({disableddays: [0,6]}) "/>

Invalid Date
Note: Date format 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 usage
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
[' 2008-.. -01 ', ' 2008-02-29 '] means disable 2008-All months-01 and 2008-02-29
[' 200[0-8]]-02-01 ', ' 2008-02-29 '] means disabled [2000 to 2008]-02-01 and 2008-02-29
[' ^2006 '] indicates that all dates for 2006 years are disabled

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

Of course, in addition to restricting the date, you can limit the time
['....-.. -.. 10\:00\:00 '] means to disable 10 dots per day (note: use \:)

No more examples, and give full play to your regular talent!

Example 4-5-1 Disable each month 5th 15th 25th
<input id= "d451 type=" text "class=" wdate "onfocus=" Wdatepicker ({disableddates: [' 5$ ']}) "/>

Note: ' 5$ ' means to note the use of $ at the end of 5

Example 4-5-2 disables all dates earlier than 2000-01-01
<input id= "d452 type=" text "class=" wdate "onfocus=" Wdatepicker ({disableddates: [' ^19 ']}) "/>

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

Example 4-5-3 is used with min/maxdate to separate selectable dates into multiple segments
This sample is divided into five segments this month, which are: 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 to meet requirements even when the requirements are very demanding
<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]}] "/>

Sample 4-5-5 Disable variables such as%y%m%d%H%m%s for all time before one hours and one hours before disabling
When the mouse clicks on the hour input box, you will find that the time corresponding to the first one hours and after 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, as described in the dynamic variable table

The example 4-5-6 #F {} is also available
This example uses a custom function to randomly disable any of the hours in 0-23
When you open the hour selection box, you will notice that there are one hours disabled and each disabled hour is different
<script>
function Randomh () {
Produces a random number of 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 ( )} ']} "/>

Effective day and effective date
Using invalid days and invalid dates makes it easy to disable unavailable dates, but when you need to enable only a small number of dates, the effective day and effective date features are ideal.
Key properties: Opposite defaults to false, and when true, invalid days and invalid dates become valid days and valid dates

Example 4-6 only enables the 5th 15th 25th of each month
<input id= "d46" type= "text" class= "Wdate" onfocus= wdatepicker ({opposite:true, disableddates: [' 5$ ']}) "/>

Note: ' 5$ ' means to note the use of $ at the end of 5

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

Key attributes:
Specialdays (0 to 6 respectively for Sunday to Saturday) usage same invalid day
Specialdates usage is the same as invalid date, but is invalid for time and seconds

Example 4-7-1 highlight Weekly Monday Friday
<input id= "d471" type= "text" class= "Wdate" onfocus= wdatepicker ({specialdays: [1,5]}) "/>

Example 4-7-2 highlight 15th per month, 1th
<input id= "d472" type= "text" class= "wdate" onfocus= "Wdatepicker" ({specialdates: [' ...-.. -01 ', ' ...-.. -15 ']}) "/>