datepicker日期范围选择的引导

当使用日期插件时,常常需要一个需求。选择两个输入框。开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间不超过当前时间。

当然,我们可以使用所选的结果来确定输入是否正确,但更好的方法是允许我们的日期选择插件做出一些限制。

一个优秀的引导比赛日期选择plug-in.datepicker和DateTimePicker。

两功能相似,使用的方法也similar.datepicker支持更多的事件和设置。

看到API知道有一个事件changedate日期发生变化时,当所选日期的变化,我们称之为回调事件。但遗憾的是,它似乎不触发该事件时,我们输入或删除直接在输入框中的日期。所以你可以添加属性只读到输入箱。只读状态,并给出明确的日期控制按钮。这个日期的变化通常只有日期插件控制。

然而,当你使用DateTimePicker的插件,单击清除按钮,你会报告错误的错误列表无法读取property'gettime'of空,结果在changedate事件是不正常的。

所以使用Datepicker插件。

然后,当一个输入框,日期的变化(包括清除),该changedate事件触发,和另一个输入框的可选范围在回调函数修正。

此外,DatePicker需要加载的界面显示中文,还需要加载css.bootstrap-datepicker.zh-cn.min.js。

下面是代码:


功能DatePicker(beginselector,endselector){
选择日期
Datepicker($(beginselector)。
{
语言:zh CN
Autoclose:真的,
该:0,
格式:yyyy-mm-dd
ClearBtn:真的,
TodayBtn:假,
结束日期:新的日期()
}),('changedate功能(EV){ }
如果(日期){
(endselector美元)。Datepicker('setstartdate ',新的日期(ev.date.valueof()))
其他{ }
(endselector美元)。Datepicker('setstartdate,null);
}
})

Datepicker($(endselector)。
{
语言:zh CN
Autoclose:真的,
该:0,
格式:yyyy-mm-dd
ClearBtn:真的,
TodayBtn:假,
结束日期:新的日期()
}),('changedate功能(EV){ }
如果(日期){
(beginselector美元)。Datepicker('setenddate ',新的日期(ev.date.valueof()))
其他{ }
(beginselector美元)。Datepicker('setenddate ',新的日期());
}

})
}

DatePicker(# date_begin


Bootstrap DatePicker实施日期选择开始日期不能大于结束时间,结束时间不小于起始时间、开始日期和结束日期不能大于当前日期。

以上是引导datepicker日期范围选择所有内容的简要介绍,希望多支持~