My97datepicker Select year, quarter, month, week, day

All along, the most used is my97datepicker to get the month and day method, today suddenly wandered to this article, stay, for future use

Write one yourself: Get the year and start counting from next month

<asp:textbox id= "Txt_date_1" runat= "width=" 90% "onclick=" Wdatepicker ({datefmt: ' yyyy-mm ', minDate: '%y-#{% M+1}-%ld '}] "class=" Date-picker "></asp:TextBox>

Original reproduced from: http://lipeng200819861126-126-com.iteye.com/blog/2069322

Original reproduced from: http://blog.csdn.net/tototuzuoquan/article/details/46343615

My97datepicker is a very flexible and useful date control. Very simple to use.

The following summary uses this calendar control to select the year, quarter, month, week, and day method.

1. Select year

<input id= "d1212" class= "wdate" type= "text" onfocus= "Wdatepicker ({datefmt: ' yyyy Year '})"/>

2, select the quarter:

<input id= "d1213" class= wdate "type=" text "onfocus=" Wdatepicker ({datefmt: ' yyyy year mm quarter ', disableddates:[' ... -0[ 5-9]-.. ', ' ... -1[0-2]-.. ', StartDate: '%y-01-01 '}) '/>

This situation also needs to be modified by adding a sentence to the Calendar.js file init method

Hide ($d. MI, $d. leftimg, $d. rightimg);

3. Select Monthly

<input id= "d1212" class= "wdate" type= "text" onfocus= "Wdatepicker ({datefmt: ' yyyy year mm Month '})"/>

4. Select Week

<input id= "d121" class= "wdate" type= "text" onfocus= "Wdatepicker ({isshowweek:true,onpicked:funccc,errdealmode:3} ) "/>

Add a JS method

function FUNCCC () {

$DP. $ (' d121 '). value= $dp. Cal.getp (' y ') + $DP. CAL.GETP (' W ', ' WW ');

}

5. Choose Day

<input id= "d1212" class= wdate "type=" text "onfocus=" Wdatepicker ({datefmt: ' YYYY year mm month DD Day '}) "/>

The 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

Example 2-1 Flat Display Demo
<div id= "Div1" ></div>
<script>
Wdatepicker ({econt: ' Div1 ', Onpicked:function (DP) {alert (' Your chosen date is: ' +dp.cal.getdatestr ()}}})
</script>

$DP. CAL.GETDATESTR usage details of built-in functions and properties

Supports multiple containers
In addition to returning a value to input, you can also return a value to another element (such as Textarea,div,span) by configuring the El property, and the HTML element with the innerHTML attribute

Example 2-2 returning a date to <span>
2008-01-01

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

Start Date Feature
Note: Date format must be consistent with REALDATEFMT and REALTIMEFMT
Sometimes you need to choose dates like birthdays in your project, and the default point start date is the current date, causing the year selection to be a hassle, and you can easily solve this problem with the start Date feature plus the Configure Alwaysusestartdate property

Sample 2-3-1 Start date simple application
The default start date is 1980-05-01
When the date box is null, 1980-05-01 is used as the starting date

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

Example 2-3-2 alwaysusestartdate attribute application
The default start date is 1980-05-01
When the date box regardless of what value, always use 1980-05-01 as the starting date

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

Example 2-3-3 using built-in parameters
In addition to using 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 1st of the month of the year is used, and minutes are used 00:00:00 as the starting time.

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

Custom Format
Ymdhmsww each of the months and weeks of the month, you can combine any of these elements to customize your personalized date format.

Date Format Table Description
Y represents the year as up to two digits. If the year is more than two digits, only the two-digit low numbers are displayed in the result.
YY Ibid., if less than two digits, the front of the 0.
YYY represents the year as a three-digit number. If the number is less than three digits, the front is 0.
YYYY represents the year as a four-digit number. If the number is less than four digits, the front is 0.
M represents the month as a number from 1 to 12
MM ditto, if less than two digits, the front of 0.
MMM returns the initials of the month from January to December (in English state to Dec).
MMMM returns the full name of the month from January to December (in English state January to December).
D represents the month date as a number from 1 to 31.
DD Ditto, if less than two digits, preceded by 0.
H represents the hour as a number from 0 to 23.
HH Ibid, if less than two digits, the front of 0.
M represents the minute as a number from 0 to 59.
MM ditto, if less than two digits, the front of 0.
s represents seconds as a number from 0 to 59.
SS-Ditto, if less than two digits, the front of 0.
W returns the week corresponding to the number 0 (Sunday)-6 (Saturday).
D returns the abbreviation of week one to six (sun to Sat in English state).
DD returns the full name of the week from Monday to Saturday (in English state Sunday to Saturday).
W returns the number of the week (1-53).
WW Ibid., if less than two digits, front 0 (01-53).

Example
Format string value
YYYY-MM-DD HH:mm:ss 2008-03-12 19:20:00
YY year m month March 08
YYYYMMDD 20080312
Today is: yyyy m years d hh when mm points today is: March 12, 2008 19:20
H:m:s 19:20:0
Y Years 8 years
MMMM d, yyyy March 12, 2008

Example 2-4-1: Time of day

<input type= "text" id= "d241" onfocus= "Wdatepicker ({datefmt: ' yyyy mm month DD Day HH when mm divided ss seconds '})" class= "Wdate" style= "width : 300px "/>

Note: Click two times to select the reason for the date, see Autopickdate property

Example 2-4-2 time seconds

<input type= "text" id= "d242" onfocus= "Wdatepicker ({skin: ' Whygreen ', datefmt: ' H:mm:ss '})" class= "Wdate"/>

Note: Here the skin (skin) attribute is used in advance, so you will see a different skin, skin properties as described in customizing and dynamically switching skin

Example 2-4-3 years

<input type= "text" id= "d243" onfocus= "Wdatepicker ({skin: ' Whygreen ', datefmt: ' YYYY year mm Month '})" class= "Wdate"/>

Example 2-4-4 obtain a system-identifiable date value (important)
A date similar to July 5, 1999 cannot be recognized by the system and must be converted to a recognizable type such as 1999-07-05

The true date value is:
<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 usually designated as a hidden control, which is to display the real value, so use a text box
Key properties: vel Specifies the ID of a control or control, and must have a value property (such as input) to store the true value (that is, the REALDATEFMT and REALTIMEFMT formatted values)

Example 2-4-5 weeks, month, year (4.6beta2 added)

<input type= "text" id= "d245" onfocus= "Wdatepicker ({datefmt: ' DD, MMMM D, yyyy '})" class= "Wdate"/>

Two-month calendar feature (4.6beta2 added)
Can pop up two-month calendars at the same time

Example 2-5 bi-monthly calendar feature

<input class= "Wdate" type= "text" onfocus= "Wdatepicker ({doublecalendar:true, datefmt: ' Yyyy-mm-dd '})"/>

Note: A two-month calendar is typically used only for scenes that contain three elements of the year, and when this property is set, Autopickdate is automatically set to True

Automatic error correction function
Error correction processing can be set to 3 modes: prompt (default) automatic error correction mark, when the value in the date box does not conform to the format, the system will try to automatically repair, if the repair failure will be based on your set of error-correcting processing mode for processing, error judgment is very intelligent it can guarantee that the user entered a value is a legitimate value

Example 2-6-1 an illegal date demo
Please fill in the following date box with an illegal date (e.g. 1997-02-29) and try to leave the focus
Using the default fault tolerant mode hint mode Errdealmode = 0 prompts when you enter an error date

Note: 1997 is not a leap year OH

Example 2-6-2 the date beyond the date limit is also considered an illegal date
The maximum date is 2000-01-10, and if the date in the box is greater than 2000-01-10 (for example, 2000-01-12) it will also be considered an illegal date.
Automatic error correction Mode Errdealmode = 1 automatically restores the previous correct value when you enter an error date

Example 2-6-3 the use of invalid days and invalid date feature limit dates are also considered an illegal date
Such as:
2008-02-20 Invalid date limit
2008-02-02 2008-02-09 2008-02-16 2008-02-23 Invalid days limit
All of them are invalid dates.
You can try to enter these dates in the box below and leave the focus

Tag Mode Errdealmode = 2 When you enter an error date, do not prompt and change, just make a mark, but the date box will not immediately hide

Note: Tag class: Wdatefmterr is defined in the skin directory Wdatepicker.css

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

Example 2-7 demo across an infinite-level framework
Can be infinite across the frame iframe, no matter how the nested frame does not have to worry about, even if there is a scroll bar is not afraid

Calendar and other special calendars for the Year of the Republic
When the format of the current year is set to YYY format, the Year Difference attribute Yearoffset (the default value of 1911 Republic of China) can realize the calendar and other special calendars of the Republic of China

Example 2-8 Republic of China year demo

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

Note: When the year format is set to YYY, the real date will be subtracted from the difference Yearoffset (the default is: 1911), if it is the year of the Republic use the default value can not be configured, if it is the other difference, you can configure the form of parameters

Editing features
When the date box has a value, after modifying a property, just click on the button to achieve the time and date of the edit

Example 2-9 editing demo for days and Times
You can try to change the month in the box below to 1, and then click Update, and you will find the date changed from 2000-02-29 01:00:00 to 2000-01-29 01:00:00

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, prohibit changing the date (no pop-up selection box)
Automatically triggers the onchange event of a text box if no onpicked event is defined
If no oncleared event is defined, the OnChange event is automatically triggered when emptying

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 display a date for another month
Add class= "Wdate" and the date icon appears to the right of the selection box.

4. Date Range Limit
Static restrictions
Note: Date format must be consistent with REALDATEFMT and REALTIMEFMT
You can limit the range of dates by configuring MinDate (minimum date), maxdate (maximum date) as a static date value.

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

Dynamic restrictions
Note: Date format 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 limit the date range, you can also use #{} for expression operations, 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
#{} 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 '}) '/>

Script Customization Restrictions
Note: Date format must be consistent with REALDATEFMT and REALTIMEFMT
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.getElementById 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
Date Difference usage:
Attribute Y,m,d,h,m,s, respectively, for the month and the day
Such as
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 the previous date + March 2 days cannot be greater than the later date and none of the preceding dates can be greater than 2020-4-3 minus March 2 days after date cannot be greater than 2020-4-3
Check-in date from   to   
<in Put 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\ ', {