Flatpickr Clear Button

Question

I'm loading flatpickr using this:

<script type="text/javascript">
jQuery(document).ready(function($){
    $('#Mydatetime').flatpickr({
        altInput: true,
        altFormat: "M j, Y @ H:i",
        enableTime: true,
        dateFormat: 'Y-m-d\\TH:i'
    });
});

<input type="text" id="Mydatetime" class="MyDate" name="my_expire_date" value="' . $variable . '"/>

The variable is just my datetime. It works, but I'd like to add a clear button similar to this. No matter what I do the button doesn't clear the date.

The example:

<a class="input-button" title="clear" data-clear>
    <i class="icon-close"></i>
</a>

Seems straightforward, but I'm clearly missing something. Anyone got one of these close buttons working properly?

score 10 · Accepted Answer · edited Feb 08 '22 at 12:21

10

Use the following method:

const $flatpickr = $("#flatpickr_id").flatpickr();

$("#some_button_id").click(function() {
   $flatpickr.clear();
})

edited Feb 08 '22 at 12:21

A Jar of Clay

5,622
6
25
39

answered Oct 13 '19 at 13:01

Abdul Rehman

1,662
3
22
36

score 7 · Answer 2 · answered Oct 07 '20 at 02:56

7

$(function() {
  $(".input_button").click(function() {
    $('#Mydatetime')[0]._flatpickr.clear();
  });
});

answered Oct 07 '20 at 02:56

John Saman

71
1
1

Ayxan Əmiraslanlı · Answer 3 · 2018-10-21T00:58:12.540

3

Just add this button to your HTML:

<button class="clear_button" title="clear" data-clear>
Clear
</button>

And add this code to the inside of "document ready" function

  $(".clear_button").click(function() {
    $('#Mydatetime').flatpickr().clear();
  })

Here is an working example: https://codepen.io/anon/pen/pxKOGP

edited Oct 21 '18 at 00:58

answered Oct 21 '18 at 00:50

Ayxan Əmiraslanlı

423
5
16

This worked. Is this the prescribed method from Flatpickr though? Their example is very unclear me - such as why you'd need the "wrap" and why you'd need the "data-clear" attribute when it doesn't seem to be used. – Sal Oct 21 '18 at 01:12
1

@SalCangeloso you can clear the `title="clear" data-clear` code from HTML. But if you remove the clear_button class it will not work. I got from documentation. – Ayxan Əmiraslanlı Oct 21 '18 at 01:18
2

Copied from answer by Adbul: "Answer by @Ayxan is not right, what it's doing is making a new instance of flatpickr and calling `clear()` on it. Most importantly it doesn't clear the hidden input fields that actually stores the date." – A Jar of Clay Feb 08 '22 at 12:22

score 1 · Answer 4 · answered Jun 28 '21 at 16:26

1

If not using jQuery, you can try this:

const my_fp = document.querySelector("#fp_field")._flatpickr;
my_fp.clear();

answered Jun 28 '21 at 16:26

shasi kanth

6,987
24
106
158

Art · Answer 5 · 2023-07-12T19:23:50.233

0

You can also use readonly attribute

 <input readonly="readonly" placeholder="Select a Destination" />

and then do all the magic with JS.

edited Jul 12 '23 at 19:23

answered Jul 12 '23 at 18:54

Art

67
9

score -1 · Answer 6 · answered Aug 16 '21 at 08:06

You can achieve it using CoffeeScript/JS. Unfortunately, there is no option provided by the flatpickr to clear the field after selection.

Envoirenment: Rails & coffeescript

View:

<div class="form-group flatpicker">
        <%= f.label :start_time_gt_eq, 'Starting at', class: 'form-control-label font-weight-bold' %>
        <div class="row d-flex justify-content-between ml-1">
          <%= f.text_field :start_time_gt_eq, class: 'form-control active position-relative col-md-11' ,
              data: {
                behavior: 'flatpickr_time',
                enable_time: true,
                alt_input: true,
              } %>
          <button type="button" id="appointment-start-from" class="close" data-dismiss="alert">×</button>
        </div>
      </div>

CoffeeScript file

(->
  window.Appointments or (window.Appointments = {})

  Appointments.init = ->
    $ ->
      $('#appointment-start-from').click ->
        $('#q_start_time_gt_eq').flatpickr().clear();

      return
        
).call this

And make sure to initialize the JS in the view file

<% content_for :js_init do %>
  Appointments.init();
<% end %>

Flatpickr Clear Button

6 Answers6