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

Posted 2023-05-07

【中文标题】如何在 Twitter 引导日期选择器中禁用结束日期范围？

【英文标题】：how to disable end date range in Twitter bootstrap date picker?

【发布时间】：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');
);

谢谢

【问题讨论】：

看起来很相似：***.com/questions/8356358/…

有很多名为 bootstrap datepicker 的项目。您正在使用哪个项目。是这个吗？ github.com/eternicode/bootstrap-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

希望这会有所帮助。