Using Select to realize the date selection effect of three-level linkage between year and day "recommended" _javascript skills

Front.

With regard to the select control, it is possible that the date selection effect of the three-level linkage is the most common application. This article is the practice of selecting a box script, and the following is a detailed description of the date selection effect

Planning

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

Year range is 1900-2100, month range is 1-12, day range is 1-31

The year range and month range are unchanged. And the range of days varies based on the actual date.

Span elements with the ID result store the date value of the final selection and the corresponding week value

<div id= "box" >
 <select name= "Sel1" id= "Sel1" >
 <option value= "Year" > </option>
 </select>
 <select name= "Sel2" id= "Sel2" >
 <option value= "month" > Month </option>
 </select>
 <select name= "Sel3" id= "Sel3" >
 <option value= "Day" > Date </option>
 </select>
 <span id= "result" ></span>
</div>

Structure generation

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

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

Algorithm processing

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

"1" Leap year

Year is divided into leap years of peace year, excepting has 365 days, leap years have 366 days. Leap year February more than excepting a day

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

The formula is: four years a leap, hundred years does not leap, 400 year 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, and November are 30 days per month, or 29 days in February if they are leap years, or 28 days in February. 1, 3, 5, 7, 8, 10, December 31 days per month

if (month = = 2) {
 //If it is a leap year if (
 [year% 4 = 0 && Year%!== 0) | | |-year% = = 0] {days
 = MB;
 If it is excepting
 }else{days
 =;
 }
If the 4th, 6, 9, November
}else if (month = 4 | | month = 6 | | Month = 9 | | Month = = (=) {days
 =;
} else{days
 =;
}

Increase or decrease of "3"

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

Year Click
Sel1.onclick = function () {
 //month display default value
 sel2.options[0].selected = true;
 Days Show Default value
 sel3.options[0].selected = true;
}

When you select a month, the number of days is automatically set to the default value ' Day ', and the number of days shows the corresponding number of days based on the calculation

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

Add or remove days
 //If it is 28 days, delete 29, 30, 31 days (even if they do not exist and do not complain) if
 (day = =) {
 sel3.remove);
 Sel3.remove (a);
 Sel3.remove (a);
 If it is 29 days if
 (day = =) {
 sel3.remove);
 Sel3.remove (a);
 If the 29th day does not exist, add the 29th day if
 (!sel3.options[29]) {
  sel3.add (new Option (', '), undefined)
 }
 }
 //If it is 30 days
 (Day = =) {
 sel3.remove);
 If the 29th day does not exist, add the 29th day if
 (!sel3.options[29]) {
  sel3.add (new Option (', '), undefined)
 }
 // If the 30th day does not exist, add the 30th day if
 (!sel3.options[30]) {
  sel3.add (new Option (', '), undefined)
 }
 }
 //If it is 31 day if
 (days = =) {
 //If the 29th day does not exist, add the 29th day if
 (!sel3.options[29]) {
  Sel3.add (new Option (', ', '), undefined)
 }
 ///If the 30th day does not exist, add the 30th
 day if (!sel3.options[30]) {
  sel3.add (new Option) (' undefined)
 }
 ///If the 31st day does not exist, add the 31st day
 if (!sel3.options[31]) {
  sel3.add ("New Option" (' 31 '), ' to '), undefined
 }}
 

"4" Results show

Every year, month, and day click events to determine whether the year, month, and number of days have all been set to Non-default values. If yes, the final result is displayed and the week value is computed;

Week format Toggle
function Changday (num) {
 switch (num) {case
 0: Return
  ' Day ';
 Case 1: Return
  ' one ';
 Case 2: Return
  ' II ';
 Case 3: Return
  ' three ';
 Case 4: Return
  ' four ';
 Case 5: Return
  ' five ';
 Case 6: Return
  ' Six ';  
 }
}
The results show that
Box.onclick = function () {
 //The year, month, and day are already set values
 if (sel1.value!= ' years ' && sel2.value!= ') Month ' && sel3.value!= ' Day '} {
 var day = new Date (sel1.value,sel2.value-1,sel3.value). Getday ();
 result.innerhtml = Sel1.value + ' year ' + Sel2.value + ' month ' + sel3.value + ' days ' + ' Week ' + changday (day);
 } else{
 result.innerhtml = ';
 }
}

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!