Plugins

Plugins are essentially a set of hooks, that receive an optional config object and a flatpickr instance.

Functionality requested by users that doesn’t make it to core usually ends up in a plugin. The flatpickr repo comes with a few plugins.

confirmDate

Provides a visual cue for users after selecting either:

• date + time
• multiple dates

{
    "enableTime": true,
    "plugins": [new confirmDatePlugin({})]
}

A spiffy SVG icon is included, along with sane defaults, but you can customize them.

Here are all the available options:

{
    confirmIcon: "<i class='fa fa-check'></i>", // your icon's html, if you wish to override
    confirmText: "OK ",
    showAlways: false,
    theme: "light" // or "dark"
}

weekSelect

For selecting a week.

flatpickr({
    "plugins": [new weekSelect({})],
    "onChange": [function(){
        // extract the week number
        // note: "this" is bound to the flatpickr instance
        const weekNumber = this.selectedDates[0]
            ? this.config.getWeek(this.selectedDates[0])
            : null;
        console.log(weekNumber);
    }]
});

rangePlugin (beta)

Range selection using two inputs.

flatpickr({
    "plugins": [new rangePlugin({ input: "#secondRangeInput"})]
});

MinMaxTimePlugin (beta)

Custom minTime and maxTime per date.

{
    enableTime: true,
    minDate: "2025",
    plugins: [
        new minMaxTimePlugin({
            table: {
                "2025-01-10": {
                    minTime: "16:00",
                    maxTime: "22:00"
                }
            }
        })
    ]
};

monthSelectPlugin

Show a month-only calendar view

{
    plugins: [
        new monthSelectPlugin({
          shorthand: true, //defaults to false
          dateFormat: "m.y", //defaults to "F Y"
          altFormat: "F Y", //defaults to "F Y"
          theme: "dark" // defaults to "light"
        })
    ]
};