如何在 Twitter 引导日期选择器中禁用结束日期范围？答案

【问题标题】：how to disable end date range in Twitter bootstrap date picker?如何在 Twitter 引导日期选择器中禁用结束日期范围？
【发布时间】：2015-07-16 02:49:52
【问题描述】：

我想禁用上一个日期。例如，如果选择开始日期为 2015-04-01，则结束日期应仅从 2015-04-01 开始。之前的日期应该被禁用。

$(document).ready(function () {
    var nowdate = new Date();
    var now = new Date(nowdate.getFullYear(), nowdate.getMonth(), nowdate.getDate(), 0, 0, 0, 0);
    var startdate = $("#start_date").datepicker({
        format: 'yyyy-mm-dd',
        onRender: function (date) {
            return date.valueOf() > now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        startdate.hide();
    }).data('datepicker');
    var enddate = $("#end_date").datepicker({
        format: 'yyyy-mm-dd',
        onRender: function (date) {
            return date.valueOf() > now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        enddate.hide();
    }).data('datepicker');
});

谢谢

【问题讨论】：

看起来很相似：stackoverflow.com/questions/8356358/…
有很多名为 bootstrap datepicker 的项目。您正在使用哪个项目。是这个吗？ github.com/eternicode/bootstrap-datepicker

标签： jquery datepicker

【解决方案1】：

正如 Aivan 所说，有几个项目与描述相符。
假设您使用的是 bootstrap-datepicker here。您可以使用“changeDate”事件来捕获所选日期并将其设置为页面上第二个日期选择器的“开始日期”（使用“setStartDate”方法）。

类似于下面 sn-p 中的内容：

...
$(".dateStart").datepicker().on("changeDate",function(){
    // Get the selected date
    var startDt = $(".dateStart").datepicker("getDate");
    // Set the 'start date' for the second datepicker 
    $(".dateEnd").datepicker("setStartDate",startDt);
});

$(".dateEnd").datepicker();
...

我为此创建了一个 JSFiddle - 你可以在这里看到它的工作 JSFiddle

希望这会有所帮助。

【讨论】：