现在有很多关于日期的插件，但是都是年、月、日以日历的形式出现，我在项目有需求是日期以下拉框的形式完成。如图：
//html代码如下；
我要评论 <div class="phone_mation">
<div class="weui-cell__hd" id="birth">
<label class="weui-label"><span>* </span>生日</label>
<div class="birth-r">
<div class="year">
<select id="date-sel-year" rel="1985" class="cx_nd"></select>
</div>
<div class="year">
<select id="date-sel-month" rel="10" class="cx_nd"></select>
</div>
<div class="year">
<select id="date-sel-day" rel="01" class="cx_nd"></select>
</div>
</div>
</div>
</div>
//需要引入插件：
// 出生年月插件
$.date_picker({
yearselector: "#date-sel-year",
monthselector: "#date-sel-month",
dayselector: "#date-sel-day"
});
插件代码：在html文件引入这个js文件和jquery文件即可；
(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 monthstr=null;
var sed = monthsel==i?"selected":"";
if(i<10){
monthstr="<option value=\"" + i + "\" "+sed+">" + '0' +i + "</option>";
}else{
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 daystr=null;
var sed = daysel==i?"selected":"";
if(i<10){
// daystr = "<option value=\"" + i + "\" "+sed+">" + +'0'+i + "</option>";
daystr =`<option value=i ${sed}>0${i}</option>`
}else{
// daystr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
daystr =`<option value=i ${sed}>${i}</option>`
}
$dayselector.append(daystr);
}
}
}
$monthselector.change(function () {
buildday();
});
$yearselector.change(function () {
buildday();
});
if($dayselector.attr("rel")!=""){
buildday();
}
}
});
})(jquery);
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论