日期选择器跳过禁用的一天 Javascript
Date Picker Skip a disabled day Javascript
我想跳过禁用日期。
工作: 代码可以跳过数组中的日期:
var disabledDates = ["2020-08-07","2020-08-06"] <br />
不工作:代码不会跳过禁用天数:
var day = day.getDay();
var monday = 1;
工作 jsfiddle: http://jsfiddle.net/9Lfjdh54/4/
var disabledDates = ["2020-08-07", "2020-08-06"]
$("#picker").datepicker({
beforeShowDay: function(day) {
const string = jQuery.datepicker.formatDate('yy-mm-dd', day);
var day = day.getDay();
var monday = 1;
if (day != monday) {
return [true] && [disabledDates.indexOf(string) == -1]
} else {
return [false]
}
}
});
$('.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);
});
$('#picker').datepicker();
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="picker"></div>
<br/><br/>
<button class="next-day">Next</button>
the days under Monday are not skipped
更具体地说,当单击“第二天”按钮时不会跳过这些。
由于下一个按钮不使用日期选择器来确定哪些日期可用,因此需要在下一个按钮中重复使用用于禁用日期的相同逻辑。
简单来说,这意味着添加星期一检查:
var day = date.getDay();
var monday = 1;
}
while (disabledDates.indexOf(string) >= 0 || day==monday);
已更新 fiddle:http://jsfiddle.net/xjq63mv2/
var disabledDates = ["2020-08-07", "2020-08-06"]
$("#picker").datepicker({
beforeShowDay: function(day) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', day);
var day = day.getDay();
var monday = 1;
if (day != monday) {
return [true] && [disabledDates.indexOf(string) == -1]
} else {
return [false]
}
}
});
$('.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);
var day = date.getDay();
var monday = 1;
}
while (disabledDates.indexOf(string) >= 0 || day == monday);
$('#picker').datepicker("setDate", date);
});
$('#picker').datepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="picker"></div>
<br/><br/>
<button class="next-day">Next</button>
<button class="prev-day">Previous</button>
我想跳过禁用日期。
工作: 代码可以跳过数组中的日期:
var disabledDates = ["2020-08-07","2020-08-06"] <br />
不工作:代码不会跳过禁用天数:
var day = day.getDay();
var monday = 1;
工作 jsfiddle: http://jsfiddle.net/9Lfjdh54/4/
var disabledDates = ["2020-08-07", "2020-08-06"]
$("#picker").datepicker({
beforeShowDay: function(day) {
const string = jQuery.datepicker.formatDate('yy-mm-dd', day);
var day = day.getDay();
var monday = 1;
if (day != monday) {
return [true] && [disabledDates.indexOf(string) == -1]
} else {
return [false]
}
}
});
$('.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);
});
$('#picker').datepicker();
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="picker"></div>
<br/><br/>
<button class="next-day">Next</button>
the days under Monday are not skipped
更具体地说,当单击“第二天”按钮时不会跳过这些。
由于下一个按钮不使用日期选择器来确定哪些日期可用,因此需要在下一个按钮中重复使用用于禁用日期的相同逻辑。
简单来说,这意味着添加星期一检查:
var day = date.getDay();
var monday = 1;
}
while (disabledDates.indexOf(string) >= 0 || day==monday);
已更新 fiddle:http://jsfiddle.net/xjq63mv2/
var disabledDates = ["2020-08-07", "2020-08-06"]
$("#picker").datepicker({
beforeShowDay: function(day) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', day);
var day = day.getDay();
var monday = 1;
if (day != monday) {
return [true] && [disabledDates.indexOf(string) == -1]
} else {
return [false]
}
}
});
$('.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);
var day = date.getDay();
var monday = 1;
}
while (disabledDates.indexOf(string) >= 0 || day == monday);
$('#picker').datepicker("setDate", date);
});
$('#picker').datepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="picker"></div>
<br/><br/>
<button class="next-day">Next</button>
<button class="prev-day">Previous</button>