使用 flatpickr 使用变量设置 minDate

【问题标题】：Setting minDate with a variable with flatpickr使用 flatpickr 使用变量设置 minDate
【发布时间】：2019-12-06 14:14:50
【问题描述】：

在相关主题或flatpickr documentation 上找不到任何答案，所以在这里发帖希望能有奇迹。

我正在使用 flatpickr，并且必须根据变量设置 minDate。

var $date = $('#calendar').data('date');
console.log ($date); // this will return the correct value

$("#calendar").flatpickr( {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Ymd",
    minDate:  $date , 
    maxDate: new Date().fp_incr(60), // 60 days from now
    disableMobile: "true",
    });

在我的页面上我有

<input id="calendar" placeholder="Pick a date" data-date="{{ "now"|date("Ymd") }}" >

我正在使用 twig，因此我的 console.log 将返回今天的日期，但它对 minDate 没有影响。以后minDate不会是今天的日期，我只是用它来测试。

在older version of flatpickr 中，您可以直接在而不是在 js 代码中设置这些类型的变量，但不幸的是，它似乎不再使用了。

【问题讨论】：

标签： javascript twig flatpickr

【解决方案1】：

根据flatpickr文档

日期字符串，必须按时间顺序匹配 dateFormat
YYYY-MM-DD HH:MM

所以，"now"|date("Ymd") 无效，试试"now"|date("Y-m-d")

https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr

【讨论】：

Ymd 是我需要的正确日期格式，并且在选项配置中也有说明（dateFormat：“Ymd”），例如20191206 而不是 2019-12-06
dateFormat: "Ymd" 仅适用于值。如果您需要 data-date 作为 Ymd，请使用另一个属性 data-mindate="{{ "now"|date("Y-m-d") }}"
编辑：删除 dateFormat 后它确实有效！不过，我不知道为什么它只适用于默认日期格式
我不确定你最后一句话是什么意思，你能澄清/详细说明一下吗？
我认为您需要将 data-date 作为 Ymd 格式用于其他目的