我使用Wix Code中的Flatpickr通过html组件。使用postMessage / onMessage进行的通信非常有效。我可以将datepicker(html-component)中的选定日期发送回Wix。此外,我可以从Wix发送到组件。问题是我postMessage一个有效的日期,它完美到达,但后来我需要将它设置为flatpickr 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>
答案 0 :(得分:0)
您必须先在创建时保存Flatpickr实例
var flatpickr = $("#startDate").flatpickr({});
然后您必须使用配置设置器
flatpickr.set('defaultDate', event.data);