Wdatepicker Plug-in Knowledge collation (i)

When the Wdatepicker.js attributes: $wdate =true, add class= "wdate" in the input box will appear on the right side of the selection of the date icon, if you do not like this style, you can class= "wdate" removed, You can also modify the style by modifying the Wdatepicker.css file in the skin directory. 1. Support multiple calling modesIn addition to supporting the general in the input click or get focus calls, but also support the use of other elements such as:<div> trigger the Wdatepicker function to invoke the pop-up date box. General Call:

<input id= "D11" type= "text" onclick= "Wdatepicker ()"/>

Icon Trigger:

<input id= "D12" type= "text"/> 

Note: You only need to pass in the ID of the control 2, Support week displayYou can decide whether to limit the week by configuring the Isshowweek property, and you can return the date by returning the selected JoJo display simple application with custom events and API functions:

<input id= "d121" type= "text" onfocus= "Wdatepicker ({isshowweek:true})"/>

Use the Onpicked event to assign the week to another text box:

<input type= "text" class= "wdate id=" d122 "onfocus=" Wdatepicker ({isshowweek:true,onpicked:function () {
$DP. $ (' D122_1 '). value= $dp. CAL.GETP (' W ', ' W '); $dp. $ (' d122_2 '). value= $dp. CAL.GETP (' W ', ' WW ');}}) " />

3, read-only switch, highlight weekend featuresSet the ReadOnly property true or False to specify whether the date box is read-only set Highlineweekday property ture or False to specify whether to highlight weekends 4. Operation Button CustomizationThe empty button and today's buttons can be customized as needed, and they correspond to the isshowclear and Isshowtoday defaults are true disable the purge feature: It is best to set the ReadOnly to True, otherwise, even if the empty button is hidden, The user can still delete the value in the input box.

<input class= "Wdate" type= "text" id= "D15" onfocus= "Wdatepicker ({isshowclear:false,readonly:true})"/>

5. Customize the first day of the week (4.6 new)The habits of each country are different, some like the Sunday as the first day, some with Monday as the first day. Related properties: FirstDayOfWeek: Can set any number of 0-6, 0: Sunday 1: Monday and so on Monday as the first day:

<input class= "Wdate" type= "text" id= "D17" onfocus= "Wdatepicker ({firstdayofweek:1})"/>

6, flat displayThe date control supports the flat display function, as long as setting the Econt property can be used as a daily, without triggering conditions, directly displayed on the page

<div id= "Div1" ></div>
<script>
wdatepicker ({econt: ' Div1 ', Onpicked:function (DP) {alert ( ' Your choice of date is: ' +dp.cal.getdatestr ()}} '
</script>

The following function is to display the selection date 7, support a variety of containersIn addition to being able to return a value to input, you can also return the date to <span> by configuring the El property to back the value to other elements (such as Textarea,div,span), and the HTML element with the innerHTML attribute:

<span id= "Demospan" >2008-01-01</span>
 

8. Start Date functionNote: The date format must be consistent with REALDATEFMT and realtimefmt rather than datefmt. Sometimes you need to choose a date for a birthday in your project, and the default point start date is the current date, which causes the year selection to be very troublesome. You can easily resolve such problems with the start Date feature plus the Configure Alwaysusestartdate property start date Simple application: The default starting date is 1980-05-01 when the date box is null, use 1980-05-01 as the starting date

<input type= "text" id= "d221 onfocus=" Wdatepicker ({startdate: ' 1980-05-01 '}) "/>

Alwaysusestartdate attribute apply: Default start date is 1980-05-01 when the date box regardless of the value, always use 1980-05-01 as the starting date

<input type= "text" id= "d222 onfocus=" Wdatepicker ({startdate: ' 1980-05-01 ', alwaysusestartdate:true}) "/>

Use built-in parameters: In addition to the use of static date values, you can also use dynamic parameters (such as:%y,%m, respectively, when the year before and the month), the following example shows that the month of 1st, when the use of the same day, when the time is used 00:00:00 as the start

<input type= "text" id= "d233" onfocus= "Wdatepicker ({startdate: '%y-%m-01 00:00:00 ', datefmt: ' Yyyy-mm-dd HH:mm:ss ', Alwaysusestartdate:true}) "/>

Obtain a system-identifiable date value (important): a date similar to July 5, 1999 is not recognized by the system and must be converted to a recognizable type such as 1999-07-05

<input id= "d244" type= "text" class= "wdate" onfocus= "Wdatepicker ({datefmt: ' yyyy year m month d ', vel: ' D244_2 '})"/>
<input id= "D244_2" type= "text"/>

Note: In practical applications, Vel is generally designated as a hidden control, here is to display the real value, so use the text box key properties: vel Specifies the ID of a control or control, must have a value property (such as input) to store the True value ( Which is the REALDATEFMT and REALTIMEFMT formatted value) 9, date range limit 1) static limitNote: Date format must be consistent with REALDATEFMT and realtimefmt instead of datefmt you can limit the range of dates by configuring MinDate (minimum date), maxdate (maximum date) as a static date value

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

2) Dynamic restrictionNote: The date format must be consistent with REALDATEFMT and realtimefmt instead of DATEFMT. You can use the dynamic variables given by the system, such as%y (current year),%m (current month), etc. to limit the date range, and you can also perform an expression operation through {}, 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 score
%s	Current seconds
{}	An expression of an operation, such as: {%d+1}: means tomorrow
#F {}	{} is a function can write custom JS code

3 Script Customization RestrictionsNote: The date format must be consistent with REALDATEFMT and realtimefmt instead of $DP with datefmt consistent systems. $D and $DP. $DV these two APIs to assist you in the date operation, and you can also fill in the #F {} with your custom script, Do whatever you want to do date limit the preceding date cannot be greater than the following date and two dates cannot be greater than 2020-10-01:

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

The previous date + 3 days cannot be greater than the following date:

<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 place the value in a date box plus defined date difference: Two parameters: id={character type} The ID value of the text box that needs to be processed, obj={object type} Date Difference Date difference Usage: Property y,m,d,h,m,s representing the month and the minute when the time is empty, represents a direct Take value, do not do the difference (the parameter in the example 4-3-1 is empty) {M:5,d:7} represents five months 7 days {y:1,d:-3} represents 1 years less 3 days {d:1,h:1} means day more 1 hours before the date + March 2 days can not be greater than the later date and the previous date can not be greater than 202 0-4-3 minus March 2 days after date cannot be greater than 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 '} '/>

Note: #F {$dp. $D (\ ' d4332\ ', {m:-3,d:-2}) | | | $dp. $DV (\ ' 2020-4-3\ ', {m:-3,d:-2})} means $DP when d4332 is empty. $DV (\ ' 2020-4-3\ ', {m:- The value of 3,d:-2})} is used $DP as the maximum value. $DV function can add explicit values, plus a defined date difference: Two parameters: value={character type} The value to be processed, obj={object type} Date difference usage with the above $DP. $D similar, such as $DP. $DV ( \ ' 2020-4-3\ ', {m:-3,d:-2}) says 2020-4-3 minus March 2 days to play your JS talent, define any date limit you want: automatically go to a randomly generated day, of course, this example has no actual purpose, just for demonstration purposes

<script>
//Returns a random date
function randomdate () {
var Y = + Math.Round (math.random () *);
var M = 1 + math.round (math.random () * one);
var D = 1 + math.round (math.random () *);
Return y+ '-' +m+ '-' +d;
}
</script>
<input type= "text" class= "wdate" id= "d434" onfocus= "var date=randomdate (); Wdatepicker ({mindate:date,maxdate:date}) "/>

4 Invalid daysYou can use this feature to disable dates from Sunday to Saturday, related properties: Disableddays (0 to 6 for Sunday to Saturday, respectively) disables the date for Saturday:

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

Disable the date corresponding to Sunday Saturday:

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

5 Invalid date Note: Date format must be consistent with REALDATEFMT and realtimefmt instead of consistent with DATEFMT you can use this feature to disable, specify one or more dates, as long as you are familiar with regular expressions, you can play the use of (regular match): If you are familiar with regular expressions, it is easy to understand the following matching usage if unfamiliar, refer to the following common examples [' 2008-02-01 ', ' 2008-02-29 '] to 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 disable [2000 to 2008]-02-01 and 2008-02-29 [ ' ^2006 ' means to disable all dates for 2006 years In addition, you can also use variables such as%y%m%d%H%m%s, with dynamic date restrictions Note:%ld cannot use [' ...-.. -01 ', '%y-%m-%d '] means to disable the first day of all years and all months 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 \:) to disable each month 5th 15th 25th:

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

Note: ' 5$ ' indicates that the use of $ at the end of 5 disables all dates earlier than 2000-01-01:

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

Note: ' ^19 ' indicates the use of the "19" note ^ 's usage of course, you can implement similar functions using MinDate This is mainly in the demo ^ usage with min/maxdate use, you can separate the selectable dates into multiple segments: this example divides the dates available for this month into five segments: 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]$ '}) '/>

Number ~15, 2[58]$:25, number 1[1-5]$:11, number ~7, 0[4-7]$:4, no. 18th 6) Effective DateUsing an invalid date can be a convenient way to disable a date that is not available, but a valid date is a good fit if you only need to enable a small number of dates. Critical properties: Opposite defaults to False, when true, invalid date becomes valid date, which does not work on invalid days, special days only enable each month of 5th 15th 25th:

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

7 special days and special datesThe use of special days and special dates is exactly the same as a completely invalid day and an invalid date, but the opposite property has a key attribute that is not valid: Specialdays (0 to 6 for Sunday to Saturday respectively) usage same as invalid day specialdates usage same as invalid date, but invalid for time and seconds Highlight Weekly Monday Friday:

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