1

当您输入 时，我的.auto-input函数会填充容器 div ，但是当您选择日期时，它不会获取字段中的值并填充div 文本。.textinputflatpickr input.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
});
<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>

4

1 回答 1

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>

于 2018-03-07T06:31:55.483 回答