日期时间选择器根据所选日期限制minHour和maxHour
日期时间选择器根据所选日期限制minHour和maxHour
提问于 2020-02-01 05:38:50
正在尝试根据所选日期的星期几限制时间选择器minHour和maxHour。例如:选择Tues。应该将选项范围限制在上午9点到下午5点之间，但Wed应该将其限制在上午11点到晚上7点之间。卡住了如何将minH和maxH传递回时间选择器。如下所示，下面的代码在选择日期时关闭，因此用户不能选择时间。我使用的是bootstrap 4.3.1，jquery 3.4.1，jquery-ui 1.12.1，jquery-ui-timepicker-addon 1.6.3，
$(document).ready(function() {
jQuery('#basic_example_1').datetimepicker({
minDate: 7,
stepMinute: 15,
onSelect: function(selectedDateTime) {
let findDayOfWeek = new Date(selectedDateTime);
let foundDayOfWeek = findDayOfWeek.getDay();
let minH;
let maxH;
//console.log(foundDayOfWeek);
if (foundDayOfWeek = 2) {
minH = '09:00';
maxH = '17:00'
}
if (foundDayOfWeek = 3) {
minH = '11:00';
maxH = '19:00'
}
if (foundDayOfWeek = 4) {
minH = '11:00';
maxH = '17:00'
}
if (foundDayOfWeek = 5) {
minH = '11:00';
maxH = '17:00'
}
if (foundDayOfWeek = 6) {
minH = '10:00';
maxH = '15:00'
}
$('#basic_example_1').datetimepicker('option', 'minHour', minH);
$('#basic_example_1').datetimepicker('option', 'maxHour', maxH);
}
});
});回答 1
Stack Overflow用户
发布于 2020-02-02 00:21:59
在这篇文章中找到了可用的解决方案的基础：Update the jquery timepicker addon from a date picker，我的更新代码如下。我希望它能帮助一些人。注意:当我加入日期格式时，datepicker会选择之前的日期(例如，单击一个星期二，它会返回星期一)。所以我省略了日期格式，选择器就可以工作了。我还需要两个单独的字段-一个用于日期选择器，另一个用于时间选择器，-I不能使用单个日期选择器来实现这一点(就像在使用alt字段的示例中一样)。
$(function(){
$("#datepicker").datepicker({
beforeShowDay: closedDay,
minDate: 7,
stepMinute: 15,
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
onSelect: function (dateText, instance) {
let testDate = new Date(dateText);
testDate = testDate.getDay();
if(testDate) {
if(testDate==2) {
$("#timepicker").removeClass("hasDatepicker");
$("#timepicker").timepicker({
hourMin: 9,
hourMax: 16,
timeFormat: 'hh:mm TT',
stepMinute: 15,
timeOnly: true
});
} else if(testDate==3){
$("#timepicker").removeClass("hasDatepicker");
$("#timepicker").timepicker({
hourMin: 11,
hourMax: 18,
timeFormat: 'hh:mm TT',
stepMinute: 15,
timeOnly: true
});
} else if(testDate==4 || testDate==5){
$("#timepicker").removeClass("hasDatepicker");
$("#timepicker").timepicker({
hourMin: 11,
hourMax: 16,
timeFormat: 'hh:mm TT',
stepMinute: 15,
timeOnly: true
});
} else {
$("#timepicker").removeClass("hasDatepicker");
$("#timepicker").timepicker({
hourMin: 10,
hourMax: 14,
timeFormat: 'hh:mm TT',
stepMinute: 15,
timeOnly: true
});
}
}
}
});
function closedDay(date) {
let day = date.getDay();
if(day == 0 || day == 1) {
return [false];
} else {
return [true];
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60011581
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号