如何在 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
    );

【问题讨论】:

错误提示minDatenullgetDate 的描述:返回日期选择器的当前日期,如果没有选择日期,则返回 null。 因此 minDatenull 值。建议默认日期。 【参考方案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 = nullminDate.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 中禁用动画?

如何防止在移动设备上显示 Jquery UI datepicker/timepicker

使用 jquery 验证和 jquery-ui datepicker