Using Select to achieve date selection effect of three-year-date linkage

xTable of Contents [1] demo [2] planning [3] structure generation [4] algorithm processing the preceding words

For the Select control, the date selection effect of three-level linkage may be the most common application. This article is a selection box script practice, the following will be a detailed description of the date selection effect

Demonstrate

Planning

By default, the year, month, and Day are made up of 3 select controls, respectively, with IDs Sel1,sel2,sel3. They contain the values of option[0], respectively, ' Year ', ' Month ', ' Day '

The year range is 1900-2100, the month range is 1-12, and the range of days is 1-31

The year range and the month range are constant. And the range of days varies according to the calculation of the actual date.

The span element with the ID of result stores the final selected date value and the corresponding week value

<DivID= "box">    <Selectname= "Sel1"ID= "Sel1">        <optionvalue= "Year">Years</option>    </Select>    <Selectname= "Sel2"ID= "Sel2">    <optionvalue= "Month">Month</option>    </Select>    <Selectname= "Sel3"ID= "Sel3">    <optionvalue= "Day">Day</option>    </Select>    <spanID= "Result"></span></Div>

Structure generation

Because the data is too large, build the structure using JavaScript generation

//generated 1900-2100 for(vari = 1900; i<=2100;i++){    varoption = document.createelement (' option '); Option.setattribute (' Value ', i); Option.innerhtml=i; Sel1.appendchild (option);}//generated January-December for(vari = 1; I <=12; i++){    varoption = document.createelement (' option '); Option.setattribute (' Value ', i); Option.innerhtml=i;    Sel2.appendchild (option); }//generated 1st-31st for(vari = 1; I <=31; i++){    varoption = document.createelement (' option '); Option.setattribute (' Value ', i); Option.innerhtml=i;    Sel3.appendchild (option); }

Algorithmic processing

The essence of the algorithm is to determine how many days in a certain month, and then delete the extra days or add fewer days

Leap year "1"

The year is divided into leap years and the Year of Peace, Common year has 365 days, with 366 days in leap. Leap year February More than common year a day

A leap year is defined (divisible by 4) and ((not divisible by 100) or (divisible by 400)) years

The formula is: four years a leap, a century does not leap, 400 years again leap

if (year% 4 = = = 0 && Year%!== 0)  | | Year% = = =0)    {return ' Leap year'}else    {return ' Common year '}

"2" Size month

There are 12 months in a year, of which 4, 6, 9, November 30 days a month, or 29 days in February, otherwise, February 28 days. 1, 3, 5, 7, 8, 10, December 31 days per month

if(Month = = 2){    //if it's a leap year    if((year% 4 = = = 0 && Year%!== 0) | | year% 400 = = = 0) { days= 29; //if it's common year,}Else{ days= 28; }//if it is 4th, 6, 9, November}Else if(Month = = 4 | | month = = 6 | | Month = = 9 | | month = = 11) { days= 30;}Else{ days= 31;}

"3" increase or decrease situation

Consider a special case where an error occurs if you first select 31st and then select February. So, when you select a year, the month and days are automatically set to the default value of ' Month ' and ' Day ', and the range of days is reset to ' 31 '

// Year Click function () {    // Month display default value    true;     // days Display default values    true ;}

When you select a month, the number of days is automatically set to the default ' Day ' and the range of days is calculated to show the corresponding number of days

At this point, the number of days may be 28, 29, 30, 314 cases

    //increase or remove days    //if it is 28 days, delete 29, 30, 31 days (even if they do not exist or error)    if(Days = = 28) {Sel3.remove (31); Sel3.remove (30); Sel3.remove (29); }    //if it's 29 days    if(Days = = 29) {Sel3.remove (31); Sel3.remove (30); //If the 29th day does not exist, add the 29th day        if(!sel3.options[29]) {Sel3.add (NewOption (' 29 ', ' 29 '), undefined)}}//if it's 30 days    if(Days = = 30) {Sel3.remove (31); //If the 29th day does not exist, add the 29th day        if(!sel3.options[29]) {Sel3.add (NewOption (' 29 ', ' 29 '), undefined)}//If the 30th day does not exist, add the 30th day        if(!sel3.options[30]) {Sel3.add (NewOption (' 30 ', ' 30 '), undefined)}}//if it's 31 days    if(Days = = 31){        //If the 29th day does not exist, add the 29th day        if(!sel3.options[29]) {Sel3.add (NewOption (' 29 ', ' 29 '), undefined)}//If the 30th day does not exist, add the 30th day        if(!sel3.options[30]) {Sel3.add (NewOption (' 30 ', ' 30 '), undefined)}//If the 31st day does not exist, add the 31st day        if(!sel3.options[31]) {Sel3.add (NewOption (' 31 ', ' 31 '), undefined)}}

"4" Results show

Click events per year, month, and day to determine whether the year, month, and days are set to a non-default value. If yes, the final result is displayed and the week value is calculated;

//Week format Switchfunctionchangday (num) {Switch(num) { Case0:            returnDay;  Case1:            returnA;  Case2:            returnTwo;  Case3:            returnThree;  Case4:            returnFour;  Case5:            returnFive;  Case6:            returnSix; }}

// results show function () {    // Current year, month, and day are already set for value when    if(sel1.value! = ' years ' && sel2.value! = ') Month ' && sel3.value! = ' Day ')        {varnew Date (sel1.value,sel2.value-1 , Sel3.value). GetDay ();         = Sel1.value + ' year ' + Sel2.value + ' month ' +  Sel3.value + ' days ' + ' week ' + changday (day);    } Else {        = ';    }}

Source view

Use Select to achieve date selection effect of three-year-date linkage