jQuery select年月日(生日)选择器

来源：互联网发布：家装cad平面设计软件编辑：程序博客网时间：2024/06/06 03:45

实际项目中，在用户的个人中心，编辑用户资料时经常会遇到选择生日选项的问题。

因为我项目工程中没有使用如jQuery UI的插件性下拉列表，所以选择select + option的原生方式，实现选择器。

能够准确计算闰年的年月日，方便表单处理。

实际效果如下图，式样略粗糙

HTML

生日中的年月日以<select>下拉方式，我们给每个select加个rel的属性，当已知用户生日时，直接通过rel属性标注，插件会将rel属性的数值转换成select的值。

[html] view plaincopyprint?

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

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

jQuery

[javascript] view plaincopyprint?

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

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

******

实际使用，最终提交时，需要获得用户输入的生日，直接 $('#date-sel-year').val() 可以获得select的内容，

有时页面逻辑是，显示生日，用户点击 [编辑] 按钮后，初始化select的内容，此时用 $('#date-sel-year').val(year) 可以完成赋值的操作。

这时候，需要注意的是，很多生日显示时，会显示为，2015-09-01，但是直接赋值 09 给date-sel-month，是不能正确显示的。

需要判断如果变量第一个字符是0，要将第二位的字符赋值给select。

******

以下是插件的具体代码：

[javascript] view plaincopyprint?

(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 FirstValue = opts.FirstValue;
// 初始化
var str = "<option value=\"" + FirstValue + "\">" + FirstText + "</option>";
$YearSelector.html(str);
$MonthSelector.html(str);
$DaySelector.html(str);
// 年份列表
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);
}
// 月份列表
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);
}
// 日列表(仅当选择了年月)
function BuildDay() {
if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
// 未选择年份或者月份
$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();
}
}
});
})(jQuery);

转载于：http://blog.csdn.net/ld_____/article/details/48346683

0 0