首页 > 解决方案 > DateTimePicker 不能禁用过去的时间吗?

问题描述

我想根据我选择的开始日期和结束日期禁用过去的时间和日期。我能够禁用我的约会,但它不会准时工作。

例子:

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



WORKING CODE
添加了一个 onClose 函数来读取时间
,例如:
如果用户选择开始日期2019 年 5 月 5 日凌晨 5 点和结束日期2019 年 5月 5 日凌晨 3 点
,则开始日期值将自动更新为5 月 5 日-2019 凌晨 3:00

结束日期

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

对于开始日期

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

结束日期

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

标签: javascriptjqueryasp.net-mvc

解决方案


对于使用 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'
  });
})

推荐阅读