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

Question

我正在使用推特 bootstrap 3.

这是我需要实现的：

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

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

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

我希望它足够清晰易懂，如果有人知道该怎么做，请指导我。

谢谢

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 日期选择器：http://www.eyecon.ro/bootstrap-datepicker/

您需要包含 jquery 和日期选择器的脚本以及日期选择器的 css。

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

Twitter Bootstrap: How to disable dates before a selected date dynamically

javascript

jquery

datepicker

twitter-bootstrap