Make flatpickr input required

Question

I'm using the amazing flatpickr on a project and need the calendar date to be mandatory.

I'm trying to have all the validation in native HTML, so I was naively trying with just adding the required attribute to the input tag, but that doesn't appear to be working.

Is there a way of natively making a date mandatory with flatpickr or do I need to write some custom checks?

Answer 1

You can easily achieve this by:

Passing allowInput:true in flatpickr config.

As example:

flatpickrConfig = {
    allowInput: true, // prevent "readonly" prop
};

From the documentation:

Allows the user to enter a date directly into the input field. By default, direct entry is disabled.

The downside of this solution is that you should enable the direct entry (but ideally form validation should occur whether or not direct entry is enabled).

But if you don't want to enable the direct entry to solve this problem, you can use the code below as a workaround:

flatpickrConfig = {
    allowInput:true,
    onOpen: function(selectedDates, dateStr, instance) {
        $(instance.altInput).prop('readonly', true);
    },
    onClose: function(selectedDates, dateStr, instance) {
        $(instance.altInput).prop('readonly', false);
        $(instance.altInput).blur();
    }
};

This code remove the readonly property when it is not in focus so that html validation can occur and add back the readonly prop when it is in focus to prevent manual input. More details about it here.

Answer 2

After digging a bit into the GitHub repo, I found a closed issue that points out that the issue will not be addressed.

In the same Issue page there is a workaround that seems to do the trick:

$('.flatpickr-input:visible').on('focus', function () {
    $(this).blur()
})
$('.flatpickr-input:visible').prop('readonly', false)