我正在研究两个引导日期选择器,一旦用户单击第一个日期选择器上的任何日期,第二个日期选择器的开始日期应该是在第一个日期选择器中选择的,在此之前所有日期都应被禁用。
但我肯定走错了路,我无法弄清楚。变量 diffDays 的值没有反映在第二个日期选择器的 startDate 字段中,因此开始日期没有反映在第二个日期选择器中。
下面是代码:
function checkDate(startDate) {
var oneDay = 24 * 60 * 60 * 1000;
var res = startDate.value.split("/");
var firstDate = new Date(res[2], res[1] - 1, res[0]);
var todayFullDate = new Date();
var diffDays = Math.round(Math.abs((firstDate.getTime() - todayFullDate
.getTime())
/ (oneDay)));
$('#date2').datepicker({
startDate: '+'+diffDays+'d'
});
}
$(function() {
$('#date1').datepicker({
format : "dd/mm/yyyy",
required : true,
});
$("#register-form").validate({
rules : {
date1 : "required"
},
messages : {
date1 : "Please enter a valid date"
},
submitHandler : function(form) {
form.submit();
}
});
});
您可以使用简单的methods
and options
与其插件一起提供,如下所示:
changeDate, setStartDate and setEndDate这是您需要利用的 3 个重要的东西。
changeDate is an event
这是fired when the date is changed
.
setStartDate and setEndDate是设置的两种方法startdate
and enddate
对于各自的datepickers
。您需要附上changeDate
事件对双方datepickers
并分别设置相应的开始和结束日期datepickers
如下
$('.start').datepicker({
autoclose:true
}).on('changeDate',function(e){
//on change of date on start datepicker, set end datepicker's date
$('.end').datepicker('setStartDate',e.date)
});
$('.end').datepicker({
autoclose:true
}).on('changeDate',function(e){
//on change of date on end datepicker, set start datepicker's date
//e.date will have selected date value.
$('.start').datepicker('setEndDate',e.date)
})
DEMO HERE
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)