javascriptflatpickr

Flatpicker: remove "enable" property

I am trying to dynamically re-enable all dates after previously restricting some dates using the enable settings.

However, I've come across an interesting workaround that involves setting _enable to undefined. This successfully made all dates selectable again, but it feels wrong.

Here's the code snippet:

// Initialize Flatpickr
const picker = flatpickr("#datepicker", {
  enableTime: false,
  dateFormat: "Y-m-d",
  enable: ["2024-10-01", "2024-11-10"], // Enable only a specific range of dates
});

// picker.set("enable", ["2024-10-01", "2024-11-10"]);

// Later, reset to make all dates selectable again
document.getElementById('enableButton').addEventListener('click', function() {
  picker.set("_enable", undefined); // <-- This works, but feels like a hack
});
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- Input for date picker -->
<input type="text" id="datepicker" placeholder="Select Date">
<button id="enableButton">Enable Dates</button>

My Questions:

  1. Why does using _enable work?

    • I assume this is some internal or hidden property, but I couldn't find any documentation explaining it. Is it safe to use in production?

  2. What is the "normal" or official way to re-enable all dates?

flatpickr:2 Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
    at he (flatpickr:2:35009)
    at Object.set (flatpickr:2:37988)
    at w.set (flatpickr:2:33474)
    at HTMLButtonElement.<anonymous> (_display/:59:14)

Here is the full "working" demo on jsfiddle

Solution

  • 1. Why does using _enable work?

    Flatpickr processes enable and disable options into internal _enable and _disable properties. Here’s what happens:

    When you set enable or disable, Flatpickr supports various types Date, string, function, and ranges -processing them all into _enable and _disable as strictly Date objects. This allows Flatpickr to handle date checks more efficiently, avoiding repeated interpretation.

    By accessing _enable, you directly use the preprocessed data, bypassing the interpretation layer.

    2. What is the "normal" or official way to re-enable all dates?

    As pointed out here in the Flatpickr examples , to ensure all dates are enabled, use a function that returns true within the enable array: picker.set("enable", [() => true]);. This method allows all dates to be selectable by bypassing prior restrictions.

    const picker = flatpickr("#datepicker", {
  enable: [function(date) {
    return date.getDay() === 5; // enable all Fridays for demo purposes
  }]
});

document.getElementById('enableButton').addEventListener('click', function() {
  picker.set("enable", [() => true]);
});
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Input for date picker -->
<input type="text" id="datepicker" placeholder="Select Date">
<button id="enableButton">Enable Dates</button>