Shulou(Shulou.com)06/02 Report--

This article shows you that the jQuery year, month and day selector is like this, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

We often encounter the problem of choosing birthday options when editing user profiles. Today I will show you how to use js to implement the year, month and day (birthday) selector, which can accurately calculate the year, month and day of leap years and facilitate form processing.

HTML

Birthday drop-down way, we add a rel attribute to each select, when the user's birthday date is known, directly marked through the rel attribute, the plug-in will convert the value of the rel attribute to the value of select.

Birthday: the day of the year

Load the jQuery library and selector plug-in:

JQuery

We encapsulate the selector in the form of a jQuyer plug-in by calling it in the following way:

(function () {$.ms_DatePicker ({YearSelector: ".sel _ year", MonthSelector: ".sel _ month", DaySelector: ".sel _ day"});})

The following is the specific code for the plug-in:

(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 / initialize var str = "" + FirstText+ "; $YearSelector.html (str); $MonthSelector.html (str); $DaySelector.html (str); / / year list var yearNow = new Date (). GetFullYear (); var yearSel= $YearSelector.attr (" rel "); for (var I = yearNow; I > = 1900; Imura -) {var sed = yearSel==i?" selected ":"; var yearStr = "" + I + "; $YearSelector.append (yearStr) } / / month list var monthSel = $MonthSelector.attr ("rel"); for (var I = 1; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.