javascript - Flatpickr用选定的日期填充div文本

当您键入.auto-input时，我的.text函数将填充div input容器，但是当您选择日期时，它将不使用flatpickr input字段中的值并填充.flatpickr div文本。

如何根据来自.flatpickr的输入填充#flapickr内的文本？

$('.auto-input').keyup(function() {
  var $this = $(this);
  $('.' + $this.attr('id') + '').html($this.val());
});
var example = flatpickr("#flatpickr", {
  locale: "en",
  altInput: true,
  dateFormat: "d-m-Y",
  minDate: "1950-01-01",
  allowInput: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input class="auto-input" id="text" type="text" /><br/>
  <input class="auto-input" id="flatpickr" type="text" placeholder="deal expires on...">
</div>
<div class="input-fill-holder">
  <div class="text"></div>
  <div class="flatpickr">Fill Date Here</div>
</div>
<link href="https://npmcdn.com/flatpickr/dist/flatpickr.css" rel="stylesheet" type="text/css">
<link href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" rel="stylesheet" type="text/css">
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>

最佳答案

您必须添加onChange或onClose事件挂钩，然后相应地更新.flatpickr div。在此处阅读更多信息：https://flatpickr.js.org/events/#hooks

这是小提琴：https://jsfiddle.net/yhn4peey/4/

这是示例：

$('.auto-input').keyup(function() {
  var $this = $(this);
  $('.' + $this.attr('id') + '').html($this.val());
});
var example = flatpickr("#flatpickr", {
  locale: "en",
  altInput: true,
  dateFormat: "d-m-Y",
  minDate: "1950-01-01",
  allowInput: false,
  onChange: function(selectedDates, dateStr, instance) {
        $(".flatpickr").html(dateStr);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input class="auto-input" id="text" type="text" /><br/>
  <input class="auto-input" id="flatpickr" type="text" placeholder="deal expires on...">
</div>
<div class="input-fill-holder">
  <div class="text"></div>
  <div class="flatpickr">Fill Date Here</div>
</div>
<link href="https://npmcdn.com/flatpickr/dist/flatpickr.css" rel="stylesheet" type="text/css">
<link href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" rel="stylesheet" type="text/css">
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>

关于javascript - Flatpickr用选定的日期填充div文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49145373/