Date control (with time and seconds)

Wdatepicker How to use calendar controls

1. Display

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

<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

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

Example

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

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	Current year
%m	current month
%d	current day
%ld	last day of the month
P align= "Center" >%h	current time
%m	current sub
%s	current second
#{}	operation expression, such as: #{%d+1}: Tomorrow
#F {}	{} is a function writable custom Js code

Examples can only select dates that are today (including today)
<input id= "d421" class= "wdate" type= "text" onfocus= "Wdatepicker ({skin: ' Whygreen ', maxdate: '%y-%m-%d '})"/>

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

Examples can only be selected this month for the date 1th to the last day of the month
<input id= "d423" class= "wdate" type= "text" onfocus= "Wdatepicker ({mindate: '%y-%m-01 ', maxdate: '%y-%m-%ld '})"/>

Examples can only be selected today from 7:00:00 to tomorrow 21:00:00 date
<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 ') "/>

The example uses an op-expression to select a date only 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 '}) "/>

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 {}

The date in front of the example 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

The date preceding the example + 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

Date control (with time and seconds)