Bootstrap DateTimePicker - 在此之前禁用日期和时间（当前时间）

Question

我试图解决这个日期时间选择器的一些非常奇怪的问题。 这是我的代码。

$("#dep-date").datetimepicker({ // From-date
    timepicker: true,
    closeOnDateSelect: false,
    closeOnTimeSelect: true,
    initTime: true,
    minDate: 0,
    roundTime: 'ceil',
    onChangeDateTime: function (selectedDate) {
        if (selectedDate != null) {
            $("#ret-date").datetimepicker({           //set 'to' mindate as selected
                minDate: new Date(selectedDate),
            });
            startDate = $("#dep-date").val();
        }
    },
    onClose: function () {
        $("#ret-date").focus();
    }
});
$("#ret-date").datetimepicker({ // TO-date
    timepicker: true,
    closeOnDateSelect: false,
    closeOnTimeSelect: true,
    initTime: true,
    minDate: 0,
    onClose: function (selectedDate) {
        if (selectedDate != null) {
            var endDate = $("#ret-date").val();
            if (startDate > endDate) {
                $("#err").css("display", "block");
                $("#ret-date").val('');
            } else {
                $("#err").css("display", "none");
                $("#dep-date").datetimepicker({
                    maxDate: new Date(selectedDate)   //set 'from' maxdate as selected
                });
            }
        }
    }
});

如何在此代码中设置minTime属性？我想要实现的是，仅在当天，应禁用当前时间之前的时间。但是，对于剩余的日子，应该再次启用所有时间。因此我无法使用disabledHours。有什么想法吗？

Answer 1

这绝对是可能的，虽然有点难以实现。

您需要做的是将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;
                }
            }
        });
    }
}

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

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

Answer 2

你也可以禁用日期数组

Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf())
    dat.setDate(dat.getDate() + days);
    return dat;
}

function getDates(startDate, stopDate) {
    var dateArray = new Array();
    var currentDate = startDate;
    while (currentDate <= stopDate) {
        dateArray.push( new Date (currentDate) )
        currentDate = currentDate.addDays(1);
    }
    console.dir(dateArray)
    return dateArray;
}



  to = new Date();
  d = new Date(); 
  x = 96; 
  d.setDate(d.getDate() - x);
  disabledDates= getDates(d,to);


$('#foo').datetimepicker({
    disabledDates:disabledDates,
    format: 'DD.MM.Y',
    viewMode: 'days'
  });