移动日期，但跳过日期选择器j查询中禁用的日期？
移动日期，但跳过日期选择器j查询中禁用的日期？
提问于 2020-03-14 07:38:03
我想跳过日期选择器中的禁用日期，
<div id="picker"></div>
<br/><br/>
<button class="next-day">Next</button>
<button class="prev-day">Previous</button>这是我关于禁用日期的代码：
var disabledDates = ["2020-03-28","2020-03-27","2020-03-26"]
$('#picker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ disabledDates.indexOf(string) == -1 ]
}
});我的日期选择代码
$('#picker').datepicker();
$('.next-day').on("click", function () {
var date = $('#picker').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24))
$('#picker').datepicker("setDate", date);
});
$('.prev-day').on("click", function () {
var date = $('#picker').datepicker('getDate');
date.setTime(date.getTime() - (1000*60*60*24))
$('#picker').datepicker("setDate", date);
});这是我的小提琴http://jsfiddle.net/3zoat0u6/1/
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-14 08:19:48
您可以在下一个/上一个事件处理程序中检查禁用日期，并在超过禁用日期之前继续添加/减去一天。例如：
$('.next-day').on("click", function () {
var date = $('#picker').datepicker('getDate');
do {
date.setTime(date.getTime() + (1000*60*60*24));
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
}
while (disabledDates.indexOf(string) >= 0) ;
$('#picker').datepicker("setDate", date);
});更新的JSfiddle
Stack Overflow用户
发布于 2020-03-14 08:17:39
首先，在disabledDates之前检查setDate中的日期。
只需按disabledDates格式(而不是date )检查日期，将date字符串格式为‘yyyy’(https://stackoverflow.com/a/3552493/9002484)，然后使用包含函数来进行这样的检查。
dtf = new Intl.DateTimeFormat('en', { year: 'numeric', month: '2-digit', day: '2-digit' })
let [{ value: mo },,{ value: da },,{ value: ye }] = dtf.formatToParts(date)
let formatedDate = `${ye}-${mo}-${da}`
if(!disabledDates.includes(formatedDate)){
// not include in disabledDates; so assign date
}else{
// include in disabledDates; do nothing
}然后循环，直到选定的日期不包括在disabledDates中。
$('.next-day').on("click", function() {
var date = $('#picker').datepicker('getDate');
while (true) {
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
dtf = new Intl.DateTimeFormat('en', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
let [{
value: mo
}, , {
value: da
}, , {
value: ye
}] = dtf.formatToParts(date)
let formatedDate = `${ye}-${mo}-${da}`
if (!disabledDates.includes(formatedDate)) {
break;
}
}
$('#picker').datepicker("setDate", date);
});您可以在disabledDates中创建查找下一个日期的函数，代码将如下所示。
function findNextDateBySkipedDate(startDate, operation, skipedDates) {
let date = new Date(startDate.getTime()); // copy date to new object
while (true) {
if (operation === "+") {
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
} else if (operation === "-") {
date.setTime(date.getTime() - (1000 * 60 * 60 * 24))
} else {
break;
}
dtf = new Intl.DateTimeFormat('en', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
let [{
value: mo
}, , {
value: da
}, , {
value: ye
}] = dtf.formatToParts(date)
let formatedDate = `${ye}-${mo}-${da}`
if (!skipedDates.includes(formatedDate)) {
break;
}
}
return date;
}
$('.next-day').on("click", function() {
var date = $('#picker').datepicker('getDate');
$('#picker').datepicker("setDate", findNextDateBySkipedDate(date, "+", disabledDates));
});
$('.prev-day').on("click", function() {
var date = $('#picker').datepicker('getDate');
$('#picker').datepicker("setDate", findNextDateBySkipedDate(date, "-", disabledDates));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60680713
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号