900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html原生的日期选择器 原生JS实现日期选择

html原生的日期选择器 原生JS实现日期选择

时间:2022-03-17 09:08:58

相关推荐

html原生的日期选择器 原生JS实现日期选择

/**生日下拉框

*把sel_year、sel_month、sel_day修改即可*/

var birthday1 ={

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

$YearSelector.html(str);

$MonthSelector.html(str);

$DaySelector.html(str);//年份列表

var yearNow = newDate().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 monthStr=null;var sed = monthSel==i?"selected":"";if(i<10){

monthStr="" + '0' +i + "";

}else{

monthStr= "" +i + "";

}

$MonthSelector.append(monthStr);

}//日列表(仅当选择了年月)

functionBuildDay() {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 dayStr=null;var sed = daySel==i?"selected":"";if(i<10){

dayStr= "" + +'0'+i + "";//dayStr =`0${i}`

}else{

dayStr= "" + i + "";//dayStr =`${i}`

}

$DaySelector.append(dayStr);

}

}

}

$MonthSelector.change(function() {

BuildDay();

});

$YearSelector.change(function() {

BuildDay();

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

BuildDay();

}

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。