通过编程设置Flatpickr defaultDate
通过编程设置Flatpickr defaultDate
提问于 2018-04-26 06:08:47
我通过一个html组件从Wix Code中使用Flatpickr。使用postMessage/onMessage可以完美地进行通信。我可以将从datepicker (html组件)中选择的日期发送回Wix。此外，我还可以从Wix发送到组件。问题是我选择了一个有效的日期，它会完美地到达，但是我需要将它设置为一个postMessage defaultDate属性。而且，我也不能解决这个问题。这条线
$("#startDate").flatpickr.defaultDate = event.data;或
$("#startDate").defaultDate = event.data;不设置defaultDate。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>回答 1
Stack Overflow用户
发布于 2018-09-07 17:35:57
您必须首先在创建时保存您的flatpickr实例
var flatpickr = $("#startDate").flatpickr({});然后，您必须使用配置设置器
flatpickr.set('defaultDate', event.data);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50032029
复制相关文章
相似问题
腾讯云开发者
