JQuery calendar (birthday) selector usage details

We often encounter the issue of choosing the birthday option when editing user data. Today I will introduce how to use js to implement the year, month, and Day (birthday) selector, which can accurately calculate the year, month, and day of a leap year, convenient Form processing.

 

HTML

The year, month, and day of the birthday are in the <select> drop-down mode. We add the rel attribute for each select statement. If the date of the user's birthday is known, it is directly indicated by the rel attribute, the plug-in converts the rel attribute value to the select value.
 

The code is as follows:	Copy code
<Label> Birthday: </label> <Select class = "sel_year" rel = "2000"> </select> year <Select class = "sel_month" rel = "2"> </select> month <Select class = "sel_day" rel = "14"> </select> day

Load the jQuery library and selector plug-in:
 

The code is as follows:	Copy code
<Script src = "jquery. js"> </script> <Script src = "birthday. js"> </script>

JQuery
We encapsulate the selector as a jQuyer plug-in. You only need to use the following method to call it:
 

The code is as follows:	Copy code
$ (Function (){ $. Ms_DatePicker ({ YearSelector: ". sel_year ", MonthSelector: ". sel_month ", DaySelector: ". sel_day" }); });

The code for the plug-in is as follows:
 

The code is as follows:

Copy code

(Function ($ ){ $. Extend ({ Ms_DatePicker: function (options ){ Var defaults = { YearSelector: "# sel_year ", MonthSelector: "# sel_month ", DaySelector: "# sel_day ", FirstText :"--", FirstValue: 0 }; Var opts = $. extend ({}, defaults, options ); Var $ YearSelector = $ (opts. YearSelector ); Var $ MonthSelector = $ (opts. MonthSelector ); Var $ DaySelector = $ (opts. DaySelector ); Var FirstText = opts. FirstText; Var FirstValue = opts. FirstValue;   // Initialization Var str = "<option value = \" "+ FirstValue +" \ ">" + FirstText + "</option> "; $YearSelector.html (str ); Optional monthselector.html (str ); $DaySelector.html (str );   // Year list Var yearNow = new Date (). getFullYear (); Var yearSel = $ YearSelector. attr ("rel "); For (var I = yearNow; I >=1900; I --){ Var sed = yearSel = I? "Selected ":""; Var yearStr = "<option value = \" "+ I +" \ "" + sed + ">" + I + "</option> "; $ YearSelector. append (yearStr ); }   // Month list Var monthSel = $ MonthSelector. attr ("rel "); For (var I = 1; I <= 12; I ++ ){ Var sed = monthSel = I? "Selected ":""; Var monthStr = "<option value = \" "+ I +" \ "" + sed + ">" + I + "</option> "; $ MonthSelector. append (monthStr ); }   // Day list (only when the year and month are selected) Function BuildDay (){ If ($ YearSelector. val () = 0 | $ MonthSelector. val () = 0 ){ // The year or month is not selected. $DaySelector.html (str ); } Else { $DaySelector.html (str ); Var year = parseInt ($ YearSelector. val ()); Var month = parseInt ($ MonthSelector. val ()); Var dayCount = 0; Switch (month ){ Case 1: Case 3: Case 5: Case 7: Case 8: Case 10: Case 12: DayCount = 31; Break; Case 4: Case 6: Case 9: Case 11: DayCount = 30; Break; Case 2: DayCount = 28; If (year % 4 = 0) & (year % 100! = 0) | (year % 400 = 0 )){ DayCount = 29;   } Break; Default: Break; }   Var daySel = $ DaySelector. attr ("rel "); For (var I = 1; I <= dayCount; I ++ ){ Var sed = daySel = I? "Selected ":""; Var dayStr = "<option value = \" "+ I +" \ "" + sed + ">" + I + "</option> "; $ DaySelector. append (dayStr );  }  }   } $ MonthSelector. change (function (){ BuildDay (); }); $ YearSelector. change (function (){ BuildDay (); }); If ($ DaySelector. attr ("rel ")! = ""){ BuildDay ();   } } // End ms_DatePicker }); }) (JQuery );