【问题标题】：Disable dates older than today with datetimepicker使用 datetimepicker 禁用比今天更早的日期
【发布时间】：2014-09-17 21:15:00
【问题描述】：

我正在尝试弄清楚如何禁用比今天更早的所有日期，这对于我在下面使用的引导日期时间选择器来说变得很棘手。

这些示例允许在创建对象时传递日期数组：

$(function () {
                $('#datetimepicker7').datetimepicker({
                    defaultDate: "11/1/2013",
                    disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ]
                });
            });

如果不计算今天之前的所有日期并将其传递给函数，我该如何做到这一点？

文档：http://eonasdan.github.io/bootstrap-datetimepicker/#example8

【问题讨论】：

标签： javascript jquery twitter-bootstrap datetimepicker

【解决方案1】：

我认为你找了一个不好的选择....

文档：看这里：http://eonasdan.github.io/bootstrap-datetimepicker/#options

在本文档中，选项的名称是 minDate

提取：

    minuteStepping:1,               //set the minute stepping
    minDate:`1/1/1900`,               //set a minimum date  <---- HERE 
    maxDate: ,

【讨论】：

【解决方案2】：

        $(function () {
            $('#datetimepicker7').datetimepicker({
                defaultDate: moment("11/01/2013", "DD-MM-YYYY"),
                minDate: moment()
            });
        });

【讨论】：

【解决方案3】：

除了设置minDate 属性外，您可能还希望在当前时间之前禁用次。你可以这样做：

首先，您需要将minDate 参数初始化为当天的午夜。然后，将事件侦听器绑定到dp.change 事件并拒绝任何早于当前时间早的时间。当拒绝这样的时间时，您通知用户并将 DateTimePicker 时间重置为当前时间。我创建了一个函数来执行此操作：

// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
    if (f.getTime() < n.getTime()+60*1000 && !open) {
        open = true;
        $('#message').dialog({
            modal: true,
            position: ['center', 'center'],
            show: 'blind',
            hide: 'blind',
            width: 400,
            dialogClass: 'ui-dialog-osx',
            buttons: {
                "I understand. Let me try again": function () {
                    $(this).dialog("close");
                    obj.data('DateTimePicker').setDate(n);
                    open = false;
                }
            }
        });
    }
}

同样，您仍然希望在 dp.change 上更新 minDate 和 maxDate 参数。因此，结合检查时间和更新属性，您会得到：

jQuery("#startDate").on("dp.change", function (e) {
    var f = new Date(e.date);    var n = new Date();
    checkDate(jQuery('#startDate'), f, n);
    jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
    var f = new Date(e.date);    var n = new Date();
    checkDate(jQuery('#startDate'), f, n);
    jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});

这将完全符合您的要求：

你可以在我为你准备的jsFiddle中找到完整的代码：

GO TO THE DEMO

【讨论】：