jQuery年月日(生日)选择器

默认值:

生日:

$(function() {

$.ms_DatePicker({

YearSelector: ".sel_year",

MonthSelector: ".sel_month",

DaySelector: ".sel_day"

});

$.ms_DatePicker();

});

birthday.js内容:(来自github)

(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;

// 初始化

var str = "" + FirstText + "";

$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 = "" + i + "";

$YearSelector.append(yearStr);

}

// 月份列表

var monthSel = $MonthSelector.attr("rel");

for (var i = 1; i <= 12; i++) {

var sed = monthSel==i?"selected":"";

var monthStr = "" + i + "";

$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 = "" + i + "";

$DaySelector.append(dayStr);

}

}

}

$MonthSelector.change(function () {

BuildDay();

});

$YearSelector.change(function () {

BuildDay();

});

if($DaySelector.attr("rel")!=""){

BuildDay();

}

} // End ms_DatePicker

});

})(jQuery);

怎么得到选择的值?

function getBirthday() {

var date = "";

date += $(".sel_year").val();

date += "-";

if (parseInt($(".sel_month").val()) < 10) {

date += "0";

date += $(".sel_month").val();

} else {

date += $(".sel_month").val();

}

date += "-";

if (parseInt($(".sel_day").val()) < 10) {

date += "0";

date += $(".sel_day").val();

} else {

date += $(".sel_day").val();

}

return date;

}

49f1444bf715

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐