Question

我想根据选择的开始日期和结束日期来禁用过去的时间和日期。我可以禁用日期，但是不能按时工作。

示例：

Start Date  - 24-May-2019 01:30 PM
End Date    - 24-May-2019 01:00 PM < suppose to not be able to choose an earlier time

我尝试了此功能，但是虽然禁用过去的日期可以正常工作，但是仍然无法使用时间

onSelect: function (selectedDate) {
    var endYear = $(this).datetimepicker('getFullYear');
    var endMonth = $(this).datetimepicker('getMonth');
    var endDay = $(this).datetimepicker('getDate');
    var endHour = $(this).datetimepicker('getHours');
    var endMinutes = $(this).datetimepicker('getMinutes');
    var endSeconds = $(this).datetimepicker('getSeconds');
    ("#endDate").datetimepicker("option", "minDate", new Date(endYear, endMonth, endDay, endHour, endMinutes, endSeconds));
}

onSelect: function (selectedDate) {
    var endYear = $(this).datetimepicker('getFullYear');
    var endMonth = $(this).datetimepicker('getMonth');
    var endDay = $(this).datetimepicker('getDate');
    var endHour = $(this).datetimepicker('getHours');
    var endMinutes = $(this).datetimepicker('getMinutes');
    var endSeconds = $(this).datetimepicker('getSeconds');
    $("#startDate").datetimepicker("option", "maxDate", new Date(endYear, endMonth, endDay, endHour, endMinutes, endSeconds));
}

也在下面尝试了此功能，但也无法正常工作

onSelect: function (selectedDate) {
    $("#endDate").datetimepicker("option", "minDate", selectedDate);
    $("#endDate").datetimepicker("option", "minTime", selectedDate);
}

onSelect: function (selectedDate) {
    $("#startDate").datetimepicker("option", "maxDate", selectedDate);
    $("#startDate").datetimepicker("option", "maxTime", selectedDate);
}

当前工作代码（仅禁用过去的日期）：
开始日期

onSelect: function (selectedDate) {
  $("#endDate").datetimepicker("option", "minDate", selectedDate);
}

工作代码
添加了onClose函数以读取时间
例如：
如果用户选择开始日期 2019年5月5日5:00 AM 和结束日期 2019年5月5日3:00 AM
开始日期值将自动更新为 2019年5月5日3:00 AM

结束日期

onSelect: function (selectedDate) {
  $("#startDate").datetimepicker("option", "maxDate", selectedDate);
}

对于startDate

onClose: function (dateText, inst) {
    var startDateSelect = $('#startDate');
    var endDateSelect = $('#endDate');

    if (endDateSelect.val() != '') {
        var sDate = startDateSelect.datetimepicker('getDate');
        var eDate = endDateSelect.datetimepicker('getDate');
        if (sDate > eDate)
            endDateSelect.datetimepicker('setDate', sDate);
    }
    else {
        endDateSelect.val(dateText);
    }
},
onSelect: function (selectedDate) {
    $("#endDate").datetimepicker("option", "minDate", selectedDate);
}

对于endDate

 onClose: function (dateText, inst) {
    var startDateSelect = $('#startDate');
    var endDateSelect = $('#endDate');

    if (startDateSelect.val() != '') {
        var sDate = startDateSelect.datetimepicker('getDate');
        var eDate = endDateSelect.datetimepicker('getDate');
        if (sDate > eDate)
            startDateSelect.datetimepicker('setDate', eDate);
    }
    else {
        startDateSelect.val(dateText);
    }
},
onSelect: function (selectedDate) {
    $("#startDate").datetimepicker("option", "maxDate", selectedDate);
}

Answer 1

对于使用jQuery DateTimePicker，还可以设置最小/最大时间。

使用minTime或maxTime作为时间使用minDate或maxDate作为日期

工作示例：https://jsfiddle.net/qy48so6d/1/

$('#datetimepicker').datetimepicker({
    minDate:'2019/05/01',
    maxDate:'2019/05/02',
    minTime:'01:00',
    maxTime:'02:00'
  });

参考：https://xdsoft.net/jqplugins/datetimepicker/#minTime

如果您使用的是https://trentrichardson.com/examples/timepicker/

您可以尝试

$("#endDate").datetimepicker("option", "minDateTime", selectedDate);
// or
$("#endDate").datetimepicker("option", "minTime", '8:00 am');

示例

$(document).ready(function() {
  var startDateTextbox = $('#startDate')
  var endDateTextbox = $('#endDate')
    startDateTextbox.datetimepicker({
    onSelect: function(selectedDate) {
            endDateTextbox.datetimepicker('option', 'minDate', startDateTextbox.datetimepicker('getDate'))
      endDateTextbox.datetimepicker('option', 'minTime', '8:00 am')
      endDateTextbox.datetimepicker('option', 'maxTime', '9:00 am')
    }
  });
  endDateTextbox.datetimepicker({
    minTime: '8:00 am'
  });
})

DateTimePicker不能禁用过去的时间吗？

1 个答案: