0

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

例如：今天是 2014 年 10 月 29 日，选择的最短日期应该是 2014 年 11 月 1 日。如果我在第一个 DateTime 选择器中选择 2014/11/01，则应该有一个范围不允许在 DateTime 选择器二中选择小于 2014/11/04 的范围。

感谢您的帮助...

http://jsfiddle.net/ajmtj1xj/2/

    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);
    }
}
4

1 回答 1

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 。

编辑：更新了 Fiddle，修复了在该月的最后一天跳过一个月的问题，并修复了选择比当前选择的结束日期晚 3 天以上的开始日期。

编辑 2：当今天是从周日到周四时，增加了一天的开始日期，当今天是周五或周六时，增加了两天。

于 2014-10-29T11:56:11.663 回答