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

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

本文关键字：日期 Bootstrap 何动态 动态 Twitter      更新时间：2023-09-26

我正在使用twitter bootstrap 3.

这就是我需要实现的:

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

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

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

我希望它足够清楚地理解，如果有人知道如何做，请指导我。

谢谢

你好，我试着这样做:

引导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。

相关文章：