javascript - 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);
}
解决方案
对于使用 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'
});
})
推荐阅读
- react-native - 反应导航:从屏幕导航到显示先前数据的另一个屏幕
- sql - 无法使用 node.js 连接到数据库
- php - 此路由 laravel 7 不支持 POST 方法
- javascript - react Material-table无法更改每个图标集的颜色?
- html - Wordpress:转换为静态文件的最佳解决方案是什么?
- mysql - 使用 Union SQL 排序
- javascript - 根据所选选项执行算术运算
- android - 什么是 Android Debug 符号以及如何在 Flutter 应用程序中配置它
- docker - 我尝试构建一个包含外部文件的 docker 容器
- python - 如何使用 __get__ 和 __set__(python 描述符)