【发布时间】:2020-04-27 20:02:25
【问题描述】:
下面我有一个 2 日期选择器,用户必须选择它们,然后 第二个日期选择器将根据 datepicker1 更改最小日期 但我的目标是在 datepicker1 中设置第三个日期并在 datepicker 2 不选择它们(自动)。
到目前为止,我可以显示最后一个可用的第一个日期选择器 第 3 天(第 3 天),而我仍然无法达到第 2 天的日期 datepicker(7th) :(
有什么建议吗?
这是代码
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
$('#datepicker2').val('').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + date_diff + extra;
})
(7)
});
});
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100);
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
注意
第一个 datepicker 最小日期是从明天开始,maxdate 是 3 天 其中不包括假期和周日,而第二个 datepicker mindate 是 基于第一个 datepicker 日期,maxdate 为 7 天,不包括 节假日和周日。我只想显示最后的第三个和第七个日期 日期选择器输入而不选择它们。两个输入都不应该 可供选择(只读)。
【问题讨论】:
-
您能否举例说明“在 datepicker1 中设置第三个日期并在 datepicker 2 中设置第七个日期而不选择它们(自动)”?
-
是的。第一个 datepicker 最小日期是从明天开始,maxdate 是 3 天,不包括节假日和星期日,而第二个 datepicker mindate 是基于第一个 datepicker 日期,maxdate 是 7 天,不包括节假日和星期日。我只想在日期选择器输入中显示最后的第 3 和第 7 日期而不选择它们。两个输入都不应该可供选择(只读)。
-
那么第一个 Datepicker 的值应该是 14th Jan(从今天开始的第 3 个),第二个 Datepicker 的值应该是 22nd Jan(从 14 日开始,7 个工作日)?
-
@MayankPatel 是的,但是因为我在数组中添加了 1 月 15 日和 18 日作为假期,所以它将跳过那些日子,而 1 月 24 日假设是第二个日期选择器的第 7 天。
-
您不希望节假日和星期日将删除 15 日、18 日和 19 日。从第一个 datepicker-14th 开始,第 7 天怎么会是 1 月 24 日?现在是 23 日。对吗?
标签: javascript jquery laravel datepicker