Question

我使用的是DateTime选择器，我无法管理如何在tommorow后的第二天创建一个minDate。第二个问题是如何在它们之间设置3天的最小范围。

例如：今天是2014/10/29，选择的最短日期应为2014/11/01。如果我在第一个DateTime选择器中选择2014/11/01，那么应该允许在DateTime选择器2中选择少于2014/11/04的范围。

感谢您的帮助......

    var d1 = null;
var d2 = null;

jQuery('#datetimepicker3').datetimepicker({
  format:'Y/m/d H:i',
  dayOfWeekStart:'1',
  value:'12:00',
  inline:true,
  lang:'ru',
    onChangeDateTime:function(dp,$input){
    d1 = new Date($input.val());
        calcDiff();
  }

});

jQuery('#datetimepicker2').datetimepicker({
  format:'Y/m/d H:i',
  dayOfWeekStart:'1',
  value:'12:00',
  inline:true,
  lang:'ru',
    onChangeDateTime:function(dp,$input){
        d2 = new Date($input.val());
 calcDiff();
  }

});

function calcDiff(){
    if(d1 != null && d2 != null){ // We have both dates
        var dh = (d2 - d1) / 1000 / 60 / 60;
        $("#difference").val(dh);
    }
}

Answer 1

您可以使用以下代码实现此目的。诀窍是销毁第二个datetimepicker并使用新的minDate值重新渲染它。

$(document).ready(function () {
    var today = new Date();
    // Add one extra day when today from Sunday to Thursday and two extra days when today is Friday or Saturday.
    var plusStartDays = 3 + (today.getDay() <= 4 ? 1 : 2);

    var minStart = new Date(today);
    minStart.setDate(today.getDate() + plusStartDays);

    var minEnd = new Date(minStart);
    minEnd.setDate(minEnd.getDate() + 3);

    $("#start").datetimepicker({
        format: "Y/m/d H:i",
        dayOfWeekStart: "1",
        value: "12:00",
        inline: true,
        lang: "nl",
        onSelectDate: function (ct) {
            var diff = CalcDiff();

            var minDate = new Date(ct);
            minDate.setDate(minDate.getDate() + 3);

            if (diff > 72)
                var defDate = new Date($("#end").val());

            $("#end").datetimepicker("destroy");
            $("#end").datetimepicker({
                format: "Y/m/d H:i",
                dayOfWeekStart: "1",
                value: "12:00",
                inline: true,
                lang: "nl",
                minDate: minDate,
                defaultDate: defDate || minDate,
                onSelectDate: function (ct) {
                    CalcDiff();
                },
                onSelectTime: function (ct) {
                    CalcDiff();
                }
            }).val(defDate || minDate);

            CalcDiff();
        },
        onSelectTime: function (ct) {
            CalcDiff();
        },
        minDate: minStart,
        defaultDate: minStart
    }).val(minStart);

    $("#end").datetimepicker({
        format: "Y/m/d H:i",
        dayOfWeekStart: "1",
        value: "12:00",
        inline: true,
        lang: "nl",
        minDate: minEnd,
        defaultDate: minEnd,
        onSelectDate: function (ct) {
            CalcDiff();
        },
        onSelectTime: function (ct) {
            CalcDiff();
        }
    }).val(minEnd);

    CalcDiff();
});

function CalcDiff() {
    var start = new Date($("#start").val());
    var end = new Date($("#end").val());

    if (start != null && end != null) { // We have both dates
        var hours = Math.round((end - start) / 36e5);
        $("#difference").val(hours);
    }

    return hours;
}

有关工作示例，请参阅此 FIDDLE 。

编辑：更新了小提琴，修复了在当月最后一天跳过一个月的问题，以及选择比当前所选结束日期晚3天以上的开始日期的修复程序。

编辑2：今天是从星期日到星期四再增加一天到开始日期，在今天星期五或星期六又增加两天。

DateTime选择器minDate和它们之间的范围

1 个答案: