jquery - 如何在 Jquery UI Datepicker 日期范围中再添加一天?
问题描述
如果我输入日期,我的这段代码可以正常工作,但是如果我单击“.from_date”并将其留空,则会出现此错误:“无法读取 null 的属性‘setDate’”。我能做些什么来避免错误?
$(".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
});
解决方案
考虑以下示例。
$(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
。这确保了任一字段中都有一个日期,因此如果用户选择或不选择日期,他们可以继续进行而不会出错。
推荐阅读
- c# - 如何知道我的 Linux YOCTO SDK 工具链中 Mono 项目提供了哪个 C# 编译器以及如何调用它?
- airflow-scheduler - 升级到 Airflow 1.10.10
- azure - 以编程方式将自定义范围添加到 Azure B2C
- apache-spark - 如何重命名现有列在数组中添加新列?
- javascript - 仅当条件为真时,如何使用 react 和 typescript 渲染 jsx?
- javascript - 检查元素是否具有相同的父级(JS)
- c# - C# 无法创建将启动的 Windows 服务
- database-design - 问答系统的数据库结构
- javascript - NextJS 在 hashChangeStart 事件上使用 preventDefault
- reactjs - 使用 Nextjs 内置工具创建类似于 'react-router-dom' 的路由