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?

Answer 1

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.

Use the following method:

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

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