从第一个日期选择器定义第二个日期选择器的开始日期

Define start date of second date picker from first date picker

本文关键字：日期 选择器 开始 第二个 定义 第一个      更新时间：2023-09-26

我正在开发两个引导日期选择器，一旦用户单击第一个日期选择器上的任何日期，第二个日期选择器的开始日期应该是在第一个日期拾取器中选择的日期，在此之前，所有日期都应被禁用。

但我肯定走错了路，我想不通。变量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和options，如下所示：

changeDate、setStartDate和setEndDate是您需要利用的三个重要内容。

changeDate是一个event，它是fired when the date is changed。

setStartDate和setEndDate是分别为datepickers设置startdate和enddate的两种方法。您需要将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

相关文章：