Question

我正在使用twitter bootstrap 3。

这是我需要实施的内容：

2个日期选择器。用户可以选择开始日期和结束日期

选择开始日期后，我想在第二个日期选择器中动态禁用它之前的所有日期。

我搜索了许多教程，但它们都显示了如何禁用特定的日期范围。

我希望它清楚明白，请指导我，如果有人知道如何做到这一点。

感谢名单

Answer 1

您好我在这里尝试这样做：

Bootstrap DatePicker

HTML：

<input type="text" class="from_date" placeholder="Select start date" contenteditable="false">
<input type="text" class="to_date" placeholder="Select end date" contenteditable="false">

JS：

var startDate = new Date('01/01/2012');
var FromEndDate = new Date();
var ToEndDate = new Date();

ToEndDate.setDate(ToEndDate.getDate()+365);

$('.from_date').datepicker({

    weekStart: 1,
    startDate: '01/01/2012',
    endDate: FromEndDate, 
    autoclose: true
})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to_date').datepicker('setStartDate', startDate);
        $('.from_date').datepicker('setStartDate', startDate);
    }); 
$('.to_date')
    .datepicker({

        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from_date').datepicker('setEndDate', FromEndDate);
        $('.to_date').datepicker('setEndDate', FromEndDate);
    });

});

我在这里使用Jquery和bootstrap datepicker：http://www.eyecon.ro/bootstrap-datepicker/

您需要包含jquery和datepicker的脚本以及datepicker的css。

Twitter Bootstrap：如何动态禁用所选日期之前的日期

1 个答案: