通过编程设置 Flatpickr 默认日期答案

【问题标题】：Set Flatpickr defaultDate through programmaticaly通过编程设置 Flatpickr 默认日期
【发布时间】：2018-04-25 22:08:46
【问题描述】：

我通过 html 组件使用来自 Wix Code 的 Flatpickr。使用 postMessage/onMessage 的通信非常有效。我可以将日期选择器（html-component）中的选定日期发送回 Wix。另外，我可以从 Wix 发送到组件。问题是我 postMessage 一个有效的日期，它完美地到达，但是我需要将它设置为一个 flatpickr defaultDate 属性。而且，我无法解决。线

$("#startDate").flatpickr.defaultDate = event.data;

或

$("#startDate").defaultDate = event.data;

不设置默认日期。 event.data 持有一个有效的设置日期。

这是一个语法问题，我知道，但我无法弄清楚。

代码如下：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/material_green.css"> 
  </head>
<script type="text/javascript">
    window.onmessage = (event) => {
    if (event.data) {
        $("#startDate").flatpickr.defaultDate = event.data;
    }
};

function sendLoadMessage () {
    window.parent.postMessage("LoadOk", "*");
}
</script>
<body onload="sendLoadMessage ();" style="font-family: verdana;background-color:white;margin:0;padding:0">
  <div>
    <input type="text" hidden="true" id="startDate" data-input>
</div>
  
    <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!--  Flatpickr  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/es.js"></script>
<script>
$("#startDate").flatpickr({
    enableTime: false,
    dateFormat: "d/m/Y",
    inline: true,
    locale: "es",  
<!-- defaultDate : "01/05/2018",-->
    onChange: function(selectedDates, dateStr, instance) {
        window.parent.postMessage(selectedDates, "*");
    },
});


</script>
</body>
 </html>

【问题讨论】：

标签： jquery flatpickr

【解决方案1】：

您必须在创建时首先保存您的 flatpickr 实例

var flatpickr = $("#startDate").flatpickr({});

然后你必须使用配置设置器

flatpickr.set('defaultDate', event.data);

【讨论】：