日历不是从今天开始 jqueryui daterangepicker

Posted 2023-05-08

【中文标题】日历不是从今天开始 jqueryui daterangepicker

【英文标题】：Calendar not starting from today jqueryui daterangepicker

【发布时间】：2019-06-12 21:20:30

【问题描述】：

我正在使用 jQuery UI Daterangepicker (reference)。

我希望日历从今天开始，没有最大日期。我正在尝试使用日历中的时刻作为日期。

这是我拥有的 html 和 JS 代码，但它将结束日期设置为今天，没有 minDate。

<input id="search-vac-daterange" name="search-vac-daterange">

$("#search-vac-daterange").daterangepicker(
    minDate: moment(),
    startDate: moment()
);

我也尝试过 minDate: new Date() 和 startDate: new Date()。也没有结果。日期以今天作为结束日期。

注意：moment 正在工作，因为 console.log(moment());返回我一个时刻对象：

p _isAMomentObject: true, _isUTC: false, _pf: …, _locale: j, _d: Fri Jan 18 2019 16:14:35 GMT+0100 (Midden-Europese standaardtijd), …

编辑：我已经尝试了下面给出的建议，它们都不会对解决方案产生影响。

dateFormat: 'dd/mm/yy',
minDate: moment().format('DD/MM/YYYY'),
startDate: moment().format('DD/MM/YYYY'),

或

minDate: new Date(moment("11-02-1993").format("YYYY-MM-DD")),
startDate: new Date(moment("11-02-1994").format("YYYY-MM-DD")),

添加图片以显示问题：

【参考方案1】：

你有两个问题。首先，moment() 返回一个 Moment 对象，该对象对于选择器的 minDate 或 startDate 属性不是有效值。要解决这个问题，只需传递一个标准的 Date 对象。

其次，您需要为datepickerOptions 对象内的底层jQueryUI datepicker 控件提供选项：

$("#search-vac-daterange").daterangepicker(
  datepickerOptions: 
    minDate: new Date(),
    startDate: new Date(),
    maxDate: '+1y' // required for future dates to be selectable
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/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">
<script type="text/javascript" src="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/2.3.1/moment.min.js"></script>
<input id="search-vac-daterange" name="search-vac-daterange">

【讨论】：

感谢您的回复！我也在想同样的事情，因此我已经尝试过使用 new Date() ，但它不起作用。

在尝试了您的建议后，我编辑了我的帖子。我仍然无法让它工作。似乎它根本没有拿起 min & startDate 。即使更改事件侦听器、presetRanges 和 applybuttonText 正在工作。

我重新阅读了文档；您需要在单独的对象中为基础 jQueryUI 日期选择器提供属性。我已经为你更新了答案

我还刚刚在问题中编辑了一个有效的 sn-p，以便为您提供演示。顺便说一句，如果您想禁用过去的日期，您应该考虑删除左侧的文本标签，因为它们中的大多数将无法通过您的验证

非常感谢！这是有效的。我无法让即时版本正常工作，我想这与格式化有关。但是使用 new Date() 它可以正常工作！非常感谢！