Question

当您输入.auto-input时，我的.text函数会填充容器div input，但它不会取flatpickr input字段中的值并填充{选择日期时，{1}} div文本。

如何根据.flatpickr的输入填充.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
});

Answer 1

您必须添加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>

Flatpickr用选择的日期填充div文本

1 个答案: