JQuery select year month Day (birthday) selector, jquery year month day

JQuery select year month Day (birthday) selector, jquery year month day

In actual projects, when editing user data in the user's personal center, you may often encounter the problem of choosing the birthday option.

Because the jQuery UI plug-in drop-down list is not used in my project, select + option native mode to implement selector.

Accurately calculates the year, month, and day of a leap year to facilitate form processing.

The actual effect is as follows: the style is slightly rough

HTML

The year, month, and day of the birthday are in the <select> drop-down mode. we add the rel attribute to each select statement. When a user's birthday is known, the rel attribute is directly used to mark it, the plug-in converts the values of the rel attribute to select values.

<Select id = "date-sel-year" rel = "2015"> </select> year <select id = "date-sel-month" rel = "9"> </select> year <select id = "date-sel-day" rel = "10"> </select> year

JQuery

$.date_picker({     YearSelector:  "#date-sel-year",     MonthSelector: "#date-sel-month",     DaySelector:   "#date-sel-day"});$.ms_DatePicker();

******

In actual use, when the final submission is made, the user's input birthday needs to be obtained, and the select content can be obtained directly $ ('# date-sel-year'). val,

Sometimes the page logic is to display the birthday. After you click the [edit] button, initialize the select content. $ ('# date-sel-year') is used at this time '). val (year) can complete the assignment operation.

At this time, it should be noted that, when many birthdays are displayed, they will be displayed as, but the date-sel-month value is assigned to 09 directly, which cannot be correctly displayed.

If the first character of the variable is 0, the second character must be assigned to select.

******

The code for the plug-in is as follows:

(Function ($) {$. extend ({date_picker: 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 FirstVal Ue = opts. firstValue; // initialize var str = "<option value = \" "+ FirstValue +" \ ">" + FirstText + "</option>"; $YearSelector.html (str ); optional monthselector.html (str); optional 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);} // list of days (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; switc H (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 () ;}}) ;}( jQuery );

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.