如何在 Jquery UI Datepicker 日期范围中再添加一天?
Posted
技术标签:
【中文标题】如何在 Jquery UI Datepicker 日期范围中再添加一天?【英文标题】:How can I add one more day to the Jquery UI Datepicker date range? 【发布时间】:2021-09-12 02:39:30 【问题描述】:如果我输入日期,我的代码可以正常工作,但如果我单击“.from_date”并将其留空,则会出现以下错误:“无法读取属性 'setDate' of null”。我能做些什么来避免这个错误?
$(".from_date").datepicker(
minDate: 0,
dateFormat: "dd/mm/y",
defaultDate: "+1w",
numberOfMonths: 1,
onClose: function()
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$(".to_date").datepicker("option", "minDate", newMin);
return $(".to_date").datepicker("show");
);
$(".to_date").datepicker(
minDate: '+1D',
dateFormat: "dd/mm/y",
defaultDate: "+1w",
numberOfMonths: 1
);
【问题讨论】:
错误提示minDate
是null
。 getDate
的描述:返回日期选择器的当前日期,如果没有选择日期,则返回 null。 因此 minDate
的 null
值。建议默认日期。
【参考方案1】:
考虑以下示例。
$(function()
$(".from_date").datepicker(
minDate: 0,
dateFormat: "dd/mm/y",
defaultDate: "+1w",
numberOfMonths: 1,
onClose: function(dText)
var minDate = $.datepicker.parseDate("dd/mm/y", dText);
if (minDate != null)
var newMin = new Date(minDate.setDate(minDate.getDate() + 8));
$(".to_date").datepicker("option", "minDate", newMin);
).datepicker("setDate", "+1w");
$(".to_date").datepicker(
minDate: "+8d",
dateFormat: "dd/mm/y",
defaultDate: "+8d",
numberOfMonths: 1
).datepicker("setDate", "+8d");;
);
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" class="from_date" name="from">
<label for="to">to</label>
<input type="text" id="to" class="to_date" name="to">
在这里,我们使用setDate
方法预填充日期。这样可以确保任一字段中都有一个日期,因此如果用户选择或没有选择日期,他们可以继续进行而不会出错。
【讨论】:
我还建议查看以下内容:jqueryui.com/datepicker/#date-range 如果你清理“从”你会得到同样的错误,试试吧 @tonydeleon 正如我在评论中所说,如果该字段为空,getDate
将返回 null
。这使得minDate
= null
和minDate.setDate()
将不存在。
@tonydeleon 添加了一个条件来帮助防止minDate
成为null
。
优秀的@Twisty 现在可以正常工作了!非常感谢以上是关于如何在 Jquery UI Datepicker 日期范围中再添加一天?的主要内容,如果未能解决你的问题,请参考以下文章
如何触发 jQuery UI DatePicker onclick?
如何通过 npm jquery-ui-datepicker-with-i18n 导入 laravel?
如何更改 jQuery UI datepicker 的主题?
如何在 jquery-ui datepicker 中禁用动画?