Wdate Picker's official website

Introduce js file first

    <script src="resources/My97DatePicker/WdatePicker.js" type="text/javascript"></script>  
    <script src="resources/My97DatePicker/WdatePicker.js" type="text/javascript"></script>  

Choose the start time and the end time, and the start time is less than the end time, the end time is greater than the start time.

    $(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 on End Date  
    $(document).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 Limited Dates 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 Limited Dates 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 Limited Dates 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 Limited Dates range 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' })"/>

Basic information in format:

% y. Current year
% M. Current month
% d. Current day
% ld last day of the month
% H. Current tense
% m. Current score
% s. Current seconds
# Operational expressions such as {% d+1}: for tomorrow
# Between F {} {} is a function that writes custom JS code

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

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

Example 4-2-2 uses operational expressions to select only dates from today and beyond (excluding today)

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

Example 4-2-3 can only choose the date of this month from 1 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 choose the date from 7:00 today to 21:00 tomorrow.

<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 operational expressions to select only dates from 20 hours ago to 30 hours later.

<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 two API s, $dp.$D and $dp.$DV, to assist you in date calculation. In addition, you can also make any date restrictions you want by filling in your custom script in # F {}.

Example 4-3-1: The previous date should not be greater than the latter and neither date should be greater than 2020-10-01.
The term of 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' })"/>

Note:
The date format of the two dates must be the same

$dp. $corresponds to the document.getElementByIdx_x function.
So why's the use of \ inside? That's because "and " are used by peripheral functions, so use an escape character , otherwise JS grammar error will be prompted.
So when you use it elsewhere, pay attention to changing "to " or "to use it.

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

Example 4-3-2 The date before + 3 days cannot be greater than the date after
Date from

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

Using the $dp.$D function, you can add the value in the date box to the defined date difference:
Two parameters: id={character type} ID value of the text box to be processed, obj={object type} date difference
For space-time, it means to take a value directly without making a difference (the parameters in Example 4-3-1 are empty)
{M:5,d:7} denotes five months and seven days
{y:1,d:-3} means less than three days a year
{d:1,H:1} means an hour more than a day

Example 4-3-3: The date before + March 02 cannot be greater than the date after and the date before cannot be greater than 2020-4-3 minus March 02, the date after cannot be greater than 2020-4-3.
Date of stay 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 '})"/>

Be careful:
#F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})}
When d4332 is empty, the value of $dp. $DV (`2020-4-3', {M:-3, d:-2}) is used as the maximum value.

Using the $dp.$DV function, you can explicitly pass in values, plus the defined date difference:
Two parameters: value={character type} value to be processed, obj={object type} date difference
Similar to the above usage of $dp.$D, such as $dp. $DV ( 2020-4-3, {M:-3, d:-2}) means 2020-4-3 minus 3 months and 2 days.

Example 4-3-4 Exerts your JS talent and defines any deadline you want
Automatically go to a randomly generated day. Of course, this example has no practical use, just for demonstration purposes.

<script>
// Returns a random date

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

Invalid days
You can use this feature to disable the corresponding dates from Sunday to Saturday, with the related attribute: disabled Days (0 to 6 represent Sunday to Saturday, respectively)

Example 4-4-1 Disables the corresponding date for Saturdays

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

Example 4-4-2 customizes the pop-up location through the position attribute

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

Invalid date
Note: The date format must be consistent with real Date Fmt and real Time Fmt.
You can use this feature to disable, specify one or more dates, as long as you are familiar with regular expressions, you can play to your heart's content.

Usage (Regular Matching):
If you are familiar with regular expressions, it's easy to understand the following matching usage
If you are not familiar with it, you can refer to the following common examples
['2008-02-01','2008-02-29'] denotes the prohibition of 2008-02-01 and 2008-02-29
['2008-. -01','2008-02-29'] denotes the prohibition of 2008-01 and 2008-02-29 for all months.
['200 [0-8]-02-01','2008-02-29'] denotes the prohibition of [2000-2008]-02-01 and 2008-02-29
['^ 2006'] denotes all the dates for which 2006 was banned

In addition, you can also use variables such as% y% M% d% H% m% s to restrict usage with dynamic date:% ld cannot be used.
['.... -. - 01','%y-%M-%d'] denotes the first day and today of banning all years and all months.
['%y-%M-{%d-1}','%y-%M-{%d+1}'] indicates that yesterday and tomorrow are disabled

Of course, besides limiting dates, you can also limit time.
['... -.. -... -. 10 00 00'] means that 10 o'clock per day is disabled (note: need to use :)

No more examples, let's play your canonical talents to the fullest extent possible! ___________

Example 4-5-1 Disables the 5th, 15th, 25th of each month

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

Note:'5 $'means pay attention to the usage 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 note ^ beginning with 19.
Of course, you can use minDate to implement similar functions, mainly to demonstrate the use of ^.

Example 4-5-3, in conjunction with min/maxDate, separates the optional dates into multiple segments
The available dates for this month are divided into five sections: 1-38-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 disabled Days disabled Dates can be used in conjunction with requirements even in very 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 variables such as% y%M%d%H%m%s for all hours before and after the first hour.
When you click on the hourly input box, you will find that the first hour and the second hour of course correspond to the gray one.

<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, etc. See the table of dynamic variables for details.

Example 4-5-6#F{} is also available
This example uses custom functions to randomly disable any one hour of 0-23
Open the Hour Selection Box and you will find that one hour is disabled, and each time the disabled hours are different.

<script>
function randomH(){
//Generate a random number 0-23 
var H = Math.round(Math.random() * 23);
if(H<10) H='0'+H;
//Return the'^'+ number
return '^'+H;
}
</script>


<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates: ['#F{randomH()}'] })"/>

Effective Date and Effective Date
Using invalid days and invalid dates can easily disable unavailable dates, but with only a few dates enabled, the function of valid days and valid dates is very suitable.
Key attribute: opposite defaults to false, and when true, invalid and invalid days become valid and valid days

Example 4-6 Enables only the 5th, 15th and 25th of each month

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

Note:'5 $'means pay attention to the usage of $at the end of 5.

Special days and special dates
Special days and special dates are used exactly the same as completely invalid days and invalid dates, but the opposite attribute is invalid for them.

Key attributes:
Special Days (0 to 6 representing Sunday to Saturday, respectively) are used in the same way as invalid days.
Special Dates are used the same as invalid dates, but invalid for time and seconds

Example 4-7-1 highlights every Monday, Friday

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

Example 4-7-2 Highlight 1/15/month

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