Flatpickr populate div text with chosen date

Question

My .auto-input function populates the container div .text when you type in an input, but it won't take the value in the flatpickr input field and populate the .flatpickr div text when you choose a date.

How do I get the text inside of .flatpickr to populate based on the input from #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>

score 1 · Accepted Answer · answered Mar 07 '18 at 06:31

1

You have to add onChange or onClose event hook and then update the .flatpickr div accordingly. Read more here: https://flatpickr.js.org/events/#hooks

Here is the fiddle: https://jsfiddle.net/yhn4peey/4/

Here is the example:

$('.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>

answered Mar 07 '18 at 06:31

richardev

976
1
10
33

Thanks for that. Any idea how to format the container text to match what's in the Flatpickr input (Jan 1, 2018)? – Kyle Underhill Mar 07 '18 at 06:36
Seriously, read the documentation, haha :D https://flatpickr.js.org/formatting/#escaping-formatting-tokens It's all there. Just replace `dateFormat: "d-m-Y"` with format you need in the config. – richardev Mar 07 '18 at 06:46
I checked out the docs but couldn't find anything about formatting the onChange date. – Kyle Underhill Mar 07 '18 at 06:49
I just wrote that you need to change `dateFormat: "d-m-Y"` in the config with the formatting you need. Another alternative (which won't make sense in using as the flatpickr provides the date formating already) is [this solution found in stackoverflow](https://stackoverflow.com/questions/24712246/format-date-time-in-jquery). I suggest sticking with the builtin configuration options. – richardev Mar 07 '18 at 06:53
Oh I see now. The `dateFormat: "d-m-Y"` I had in the function wasn't changing the input from the picker input like I thought, but it actually was changing the onChange text. Thanks again. – Kyle Underhill Mar 07 '18 at 06:59
No problem @KyleUnderhill Have a great day! – richardev Mar 07 '18 at 07:17

Flatpickr populate div text with chosen date

1 Answers1