Some uses of Wdatepicker

After selecting a date, perform another function of your own onpicked:function () {LoadData ();}

<input type="text" class="timeinput FL mr5"Id="Txttime"onclick="Wdatepicker ({maxdate: '%y-%m ', Skin: ' Whygreen ', Readonly:true, datefmt: ' yyyy-mm ', Isshowweek:true, Onpicked:func tion () {loaddata ();}})"Value=""Onblur="This.value = (This.value = = ")? ": This.value"onfocus="This.value = (This.value = = ")? ": This.value">

1. Cross-infinite frame display

No matter where you put the date control, you don't have to worry about being obscured by the outer iframe to affect the customer experience, because the My97 date control can be displayed across an infinite frame

Example 2-7 demonstration across an infinite-level framework

Unlimited cross-frame iframe, no matter how nested frame no need to worry about, even if there is scroll bar is not afraid

2. Annual calendar of the Republic of China and other special calendars

The year calendar and other special calendars can be achieved by using the Year Difference attribute Yearoffset (the default of 1911 Republic of China) when the current format is set to YYY format.

Example 2-8 Republic of the year demo

<input type= "text" id= "D28" onclick= "Wdatepicker ({datefmt: ' Yyy/mm/dd '})"/>

Note: When the year format is set to YYY, the true date will be subtracted by a difference of yearoffset (the default is: 1911), if the year of the Republic uses the default value can not be configured separately, if it is the other difference, can be configured in the form of parameters

3. Convenient for programming

If the value of El is this, it can be omitted, that is, all el:this can not be written
When the date box is set to Disabled, the date is not changed (the selection box does not pop up)
If no onpicked event is defined, the onchange event of the text box is automatically triggered
If no oncleared event is defined, the OnChange event is automatically triggered when emptied

4. Other properties

Set the ReadOnly property to specify whether the date box is read-only
Set the Highlineweekday property to specify whether to highlight weekends
Set the Isshowothers property to specify whether to show dates for other months
Plus class= "Wdate" will appear on the right of the selection box date icon

Multiple languages and custom skins

1. Multi-lingual support

With the Lang property, you can configure the language for each date control individually, or you can configure the global language with Wdatepicker.js
Language list and Language installation instructions See language configuration

Example 3-1 Multi-language example

Chinese Traditional:
<input id= "d311" class= "wdate" type= "text" onfocus= "Wdatepicker ({lang: ' ZH-TW '})"/>

English:
<input id= "d312" class= "wdate" type= "text" onfocus= "Wdatepicker ({lang: ' en '})"/>

Chinese Simplified:
<input id= "d313" class= "wdate" type= "text" onfocus= "Wdatepicker ({lang: ' ZH-CN '})"/>

Note: The default is lang= ' auto ', which automatically selects the language according to the browser's language.

2. Customize and dynamically switch skins

Skin properties allow you to configure skins individually for each date control, or you can configure the global skin via Wdatepicker.js
Skin list and skin installation instructions See skin Configuration

Example 3-2 Skin Demo

Default skin defaults: Skins: ' Default '

<input id= "d321" class= "wdate" type= "text" onfocus= "Wdatepicker ()"/>

Note: skin= ' default ' is configured in Wdatepicker, so this can be omitted, so if you configure the skin in the Wdatepicker to ' whygreen ' then use ' whygreen ' skin without specifying the skins

Whygreen: Skin : ' Whygreen '

<input id= "d322" class= "wdate" type= "text" onfocus= "Wdatepicker ({skin: ' Whygreen '})"/>

4. Date Range Restrictions

1. Static restrictions
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 year February 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 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 '}) "/>

2. 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 a limited date range , you

You can also perform an expression operation by #{}, 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 expression, such as: #{%d+1}: Means tomorrow
#F {}	A function-writable custom JS code between {}

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 uses an op-expression to select only 20 hours before 30 hours of the day

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

3. 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.getElementById 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

Some uses of Wdatepicker