繁体   English   中英

DateTimePicker无法禁用过去的时间吗?

[英]Is DateTimePicker cannot disable past time?

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

例:

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函数来读取时间
例如 :
如果用户选择开始日期05-May-2019 5:00 AM和结束日期05-May-2019 3:00 AM
开始日期值将自动更新至05-May-2019 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);
}

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM