flatpickr

https://flatpickr.js.org/
Admin
flatpickr is a lightweight and powerful datetime picker, offering a lean, UX-driven, and extensible...
Tokens:8,867
Snippets:136
Trust Score:8.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Flatpickr via npm

Source: https://flatpickr.js.org/getting-started

Install the flatpickr module using npm for use in module-based environments.

```bash
# using npm install
npm i flatpickr --save

```

--------------------------------

### Configuring Event Hooks

Source: https://flatpickr.js.org/events

This example shows how to configure various event hooks like onChange, onOpen, and onClose. Hooks can accept a single function or an array of functions.

```javascript
{
    onChange: function(selectedDates, dateStr, instance) {
        //...
    },
    onOpen: [
        function(selectedDates, dateStr, instance){
            //...
        },
        function(selectedDates, dateStr, instance){
            //...
        }
    ],
    onClose: function(selectedDates, dateStr, instance){
       // ...
    }
}
```

--------------------------------

### DateTimePicker with Minimum Time

Source: https://flatpickr.js.org/examples

Configure a DateTimePicker to only allow selections starting from a specific time. Use `minTime`.

```javascript
{
    enableTime: true,
    minTime: "09:00"
}
```

--------------------------------

### Flatpickr with External Elements (HTML Structure)

Source: https://flatpickr.js.org/examples

Integrate Flatpickr with custom HTML elements for input, toggling, and clearing. The `wrap: true` option is essential for this setup.

```html
<div class="flatpickr">
    <input type="text" placeholder="Select Date.." data-input> <!-- input is mandatory -->

    <a class="input-button" title="toggle" data-toggle>
        <i class="icon-calendar"></i>
    </a>

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

```javascript
{
    wrap: true
}
```

--------------------------------

### Get Flatpickr Instance from Query Selector

Source: https://flatpickr.js.org/instance-methods-properties-elements

Obtain the flatpickr instance by querying for an element using a CSS selector and passing it to the flatpickr constructor.

```javascript
const myInput = document.querySelector(".myInput");
const fp = flatpickr(myInput, {});  // flatpickr
```

--------------------------------

### Example of Escaping Formatting Tokens

Source: https://flatpickr.js.org/formatting

Demonstrates how to escape formatting tokens using a backslash (\) to display literal characters. This is useful when you want to include characters like 'Z' in your date format that might otherwise be interpreted as a token.

```javascript
{
    dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z
}
```

--------------------------------

### Range Calendar Mode

Source: https://flatpickr.js.org/examples

Enables the range calendar mode for selecting a start and end date.

```javascript
{
    mode: "range"
}

```

--------------------------------

### Accessing Instance Properties

Source: https://flatpickr.js.org/instance-methods-properties-elements

Once you have a flatpickr instance (e.g., stored in a variable `fp`), you can access its properties to get information about the calendar's state.

```APIDOC
## Instance Properties

Once you’ve got the instance in say `fp`, accessing props is as simple as e.g. `fp.currentYear`

### selectedDates

The array of selected dates (Date objects).

### currentYear

The year currently displayed on the calendar.

### currentMonth

The zero-indexed month number (0-11) currently displayed on the calendar.

### config

The configuration object (defaults + user-specified options).
```

--------------------------------

### Get Flatpickr Instance from Multiple Elements

Source: https://flatpickr.js.org/instance-methods-properties-elements

When initializing flatpickr on multiple elements using a class selector, you can access individual instances from the returned array.

```javascript
const calendars = flatpickr(".calendar", {});
calendars[0] // flatpickr
```

--------------------------------

### Get Flatpickr Instance from Element ID

Source: https://flatpickr.js.org/instance-methods-properties-elements

Store the flatpickr instance by assigning the result of an invocation to a variable, using an element's ID.

```javascript
const fp = flatpickr("#myID", {}); // flatpickr
```

--------------------------------

### Basic Time Picker Configuration

Source: https://flatpickr.js.org/examples

Enable time selection without a calendar. Use `enableTime: true` and `noCalendar: true` with a time-specific `dateFormat`.

```javascript
{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
}
```

--------------------------------

### Create Flatpickr Instance with Element

Source: https://flatpickr.js.org/getting-started

Create a flatpickr instance by passing the DOM element directly, recommended when using flatpickr within a framework.

```javascript
// If using flatpickr in a framework, its recommended to pass the element directly
flatpickr(element, {});

```

--------------------------------

### Time Picker with Time Limits

Source: https://flatpickr.js.org/examples

Set minimum and maximum times for the time picker. Use `minTime` and `maxTime` options.

```javascript
{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    minTime: "16:00",
    maxTime: "22:30",
}
```

--------------------------------

### Instance Methods

Source: https://flatpickr.js.org/instance-methods-properties-elements

A collection of methods available on a flatpickr instance to control its behavior and appearance.

```APIDOC
## Instance Methods

### changeMonth(monthNum, is_offset = true)

Changes the current month.

```javascript
let calendar = flatpickr(yourElement, config);
calendar.changeMonth(1); // go a month ahead
calendar.changeMonth(-2); // go two months back

calendar.changeMonth(0, false); // go to January
```

### clear()

Resets the selected dates (if any) and clears the input.

### close()

Closes the calendar.

### destroy()

Destroys the flatpickr instance, cleans up - removes event listeners, restores inputs, etc.

### formatDate(dateObj, formatStr)

`dateObj` is a Date, and `formatStr` is a string consisting of formatting tokens.

**Return Value** A string representation of`dateObj`, formatted as per `formatStr`

### jumpToDate(date, triggerChange)

Sets the calendar view to the year and month of `date`, which can be a date string, a Date, or nothing.
If`date`is undefined, the view is set to the latest selected date, the `minDate`, or today’s date
If `triggerChange` is set to `true`, the `onMonthChange` and `onYearChange` hooks are triggered, but only if the new values differ.

### open()

Shows/opens the calendar.

### parseDate(dateStr, dateFormat)

Parses a date string or a timestamp, and returns a Date.

### redraw()

Redraws the calendar. Shouldn’t be necessary in most cases.

### set(option, value)

Sets a config option `option`to `value`, redrawing the calendar and updating the current view, if necessary.

### setDate(date, triggerChange, dateStrFormat)

Sets the current selected date(s) to`date`, which can be a date string, a Date, or an`Array` of the Dates.
Optionally, pass true as the second argument to force any onChange events to fire. And if you’re passing a date string with a format other than your `dateFormat`, provide a `dateStrFormat` e.g. `"m/d/Y"`.

### toggle()

Shows/opens the calendar if its closed, hides/closes it otherwise.
```

--------------------------------

### Enable Time and Set Date Format

Source: https://flatpickr.js.org/examples

Configures Flatpickr to allow time selection and specifies the desired date and time format.

```javascript
{
    enableTime: true,
    dateFormat: "Y-m-d H:i",
}

```

--------------------------------

### Static Date Utility Methods

Source: https://flatpickr.js.org/instance-methods-properties-elements

Utility methods for parsing and formatting dates directly from the flatpickr object, without needing an instance.

```APIDOC
## Useful static methods

flatpickr exposes its date parser and formatter which doesn’t require an instance to work.
While not as powerful as say `moment.js`, they’re functional enough to replace it in most of the basic usecases.

### flatpickr.parseDate(dateStr, dateFormat)

Returns a `Date` object.

```javascript
flatpickr.parseDate("2016-10-20", "Y-m-d")
// Thu Oct 20 2016 00:00:00
flatpickr.parseDate("31/01/1995", "d/m/Y")
// Tue Jan 31 1995 00:00:00
```

### flatpickr.formatDate(dateObj, dateFormat)

```javascript
flatpickr.formatDate(new Date(), "Y-m-d h:i K")
// "2017-04-24 11:56 AM"
```
```

--------------------------------

### Create Flatpickr Instance with Selector

Source: https://flatpickr.js.org/getting-started

Create a flatpickr instance by passing a CSS selector string. This method supports creating multiple instances if the selector matches multiple elements.

```javascript
// Otherwise, selectors are also supported
flatpickr("#myID", {});

// creates multiple instances
flatpickr(".anotherSelector");

```

--------------------------------

### Include Flatpickr via CDN for Non-Module Environments

Source: https://flatpickr.js.org/getting-started

Include flatpickr's CSS and JavaScript files directly from a CDN for use in non-module environments.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

```

--------------------------------

### DateTimePicker with Time Range Limits

Source: https://flatpickr.js.org/examples

Set both minimum and maximum time constraints for a DateTimePicker. Use `minTime` and `maxTime`.

```javascript
{
    enableTime: true,
    minTime: "16:00",
    maxTime: "22:00"
}
```

--------------------------------

### Enable MinMaxTime Plugin

Source: https://flatpickr.js.org/plugins

The MinMaxTimePlugin allows setting custom minimum and maximum times for specific dates. Configure this via a 'table' object mapping dates to time constraints.

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

```

--------------------------------

### Instance DOM Elements

Source: https://flatpickr.js.org/instance-methods-properties-elements

Access to the various DOM elements that constitute the flatpickr calendar UI.

```APIDOC
## Elements

### input

The text `input` element associated with `flatpickr`.

### calendarContainer

Self-explanatory. This is the `div.flatpickr-calendar` element.

### prevMonthNav

The “left arrow” element responsible for decrementing the current month.

### nextMonthNav

The “right arrow” element responsible for incrementing the current month.

### currentMonthElement

The `span` holding the current month’s name.

### currentYearElement

The `input` holding the current year.

### days

The container for all the day elements.
```

--------------------------------

### Import Flatpickr in CommonJS

Source: https://flatpickr.js.org/getting-started

Import the flatpickr library using CommonJS syntax for module bundlers like webpack.

```javascript
// commonjs
const flatpickr = require("flatpickr");

```

--------------------------------

### Preload Multiple Dates

Source: https://flatpickr.js.org/examples

Allows selection of multiple dates and preloads two specific dates.

```javascript
{
    mode: "multiple",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-20", "2016-11-04"]
}

```

--------------------------------

### Import Flatpickr in ES Modules

Source: https://flatpickr.js.org/getting-started

Import the flatpickr library using ES module syntax, recommended for TypeScript and modern JavaScript projects.

```javascript
// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";

```

--------------------------------

### Include Flatpickr and Russian Locale Scripts in Browser

Source: https://flatpickr.js.org/localization

Include these script tags in your HTML to load Flatpickr and the Russian locale for browser usage.

```html
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>

```

--------------------------------

### Set First Day of Week Globally

Source: https://flatpickr.js.org/localization

Modify the global locale settings to change the first day of the week to Monday.

```javascript
flatpickr.l10ns.default.firstDayOfWeek = 1; // Monday

```

--------------------------------

### Preload Specific Time

Source: https://flatpickr.js.org/examples

Preload a specific time into the picker. Use `defaultDate` with a time string when `enableTime` is true.

```javascript
{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    defaultDate: "13:45"
}
```

--------------------------------

### Enable Dates by Function

Source: https://flatpickr.js.org/examples

Enables dates based on a custom function, specifically selecting dates in even months that fall before the 15th of the month.

```javascript
{
    enable: [
        function(date) {
            // return true to enable

            return (date.getMonth() % 2 === 0 && date.getDate() < 15);

        }
    ]
}

```

--------------------------------

### Human-Friendly Date Input

Source: https://flatpickr.js.org/examples

Uses `altInput` to display a user-friendly date format while storing the original format in the hidden input. Recommended for better user experience.

```javascript
{
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
}

```

--------------------------------

### Set Maximum Date with Custom Format

Source: https://flatpickr.js.org/examples

Sets a maximum selectable date and uses a custom `dateFormat` for display.

```javascript
{
    dateFormat: "d.m.Y",
    maxDate: "15.12.2017"
}

```

--------------------------------

### 24-Hour Time Picker

Source: https://flatpickr.js.org/examples

Configure the time picker to use 24-hour format. Set `time_24hr: true` in addition to time picker options.

```javascript
{
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true
}
```

--------------------------------

### Format Date using Flatpickr Static Method

Source: https://flatpickr.js.org/instance-methods-properties-elements

Utilize the static `flatpickr.formatDate` method to format a Date object into a string representation based on a specified format string.

```javascript
flatpickr.formatDate(new Date(), "Y-m-d h:i K")
```

--------------------------------

### Set Global Locale in Browser

Source: https://flatpickr.js.org/localization

Set the Russian locale globally for all Flatpickr instances in a browser environment.

```javascript
flatpickr.localize(flatpickr.l10ns.ru);
flatpickr("mySelector");

```

--------------------------------

### Set Minimum Date

Source: https://flatpickr.js.org/examples

Restricts date selection to a minimum date, specified here as the first day of a month.

```javascript
{
    minDate: "2020-01"
}

```

--------------------------------

### Enable Confirm Date Plugin

Source: https://flatpickr.js.org/plugins

Use the confirmDate plugin to provide a visual cue after selecting a date and time or multiple dates. It requires enabling time selection.

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

--------------------------------

### Preload Range Dates

Source: https://flatpickr.js.org/examples

Configure Flatpickr to preload a date range. Ensure the `mode` is set to 'range' and `dateFormat` is specified.

```javascript
{
    mode: "range",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-10", "2016-10-20"]
}
```

--------------------------------

### Import Russian Locale with ES Modules

Source: https://flatpickr.js.org/localization

Use this snippet to import the Russian locale for a specific Flatpickr instance when using ES modules.

```javascript
import flatpickr from "flatpickr"
import { Russian } from "flatpickr/dist/l10n/ru.js"

flatpickr(myElem, {
    "locale": Russian // locale for this instance only
});

```

--------------------------------

### Customize Confirm Date Plugin

Source: https://flatpickr.js.org/plugins

Customize the confirmDate plugin's icon, text, visibility, and theme. These options can be passed as a configuration object to the plugin.

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

--------------------------------

### Customizing Date Cells with onDayCreate

Source: https://flatpickr.js.org/events

The onDayCreate hook provides full control over each date cell. It allows for dynamic content injection based on date properties or random logic.

```javascript
{
    onDayCreate: function(dObj, dStr, fp, dayElem){
        // Utilize dayElem.dateObj, which is the corresponding Date

        // dummy logic
        if (Math.random() < 0.15)
            dayElem.innerHTML += "<span class='event'></span>";

        else if (Math.random() > 0.85)
            dayElem.innerHTML += "<span class='event busy'></span>";
    }
}
```

--------------------------------

### Change Flatpickr Month

Source: https://flatpickr.js.org/instance-methods-properties-elements

Use the `changeMonth` method to navigate between months. Set `is_offset` to `false` to jump to a specific month (0-indexed).

```javascript
let calendar = flatpickr(yourElement, config);
calendar.changeMonth(1); // go a month ahead
calendar.changeMonth(-2); // go two months back

calendar.changeMonth(0, false); // go to January
```

--------------------------------

### Localize Flatpickr Instance with Locale String in Browser

Source: https://flatpickr.js.org/localization

Specify the locale as a string ('ru') for a specific Flatpickr instance when using it in a browser environment.

```javascript
flatpickr(myElement, {
    "locale": "ru"  // locale for this instance only
});

```

--------------------------------

### Enable Month Select Plugin

Source: https://flatpickr.js.org/plugins

The monthSelectPlugin displays a calendar view limited to month selection. Options include shorthand display, date formatting, and theme customization.

```javascript
{
    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"
        })
    ]
};

```

--------------------------------

### Enable Week Select Plugin

Source: https://flatpickr.js.org/plugins

The weekSelect plugin allows users to select a week. An onChange hook is provided to extract the week number using the instance's getWeek method.

```javascript
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);
    }]
});

```

--------------------------------

### Require Dark Theme CSS with Webpack

Source: https://flatpickr.js.org/themes

Use this method to import the dark theme's CSS file when using a module bundler like webpack.

```javascript
require("flatpickr/dist/themes/dark.css");

```

--------------------------------

### Use Flatpickr as a jQuery Plugin

Source: https://flatpickr.js.org/getting-started

Integrate flatpickr as a jQuery plugin by calling the .flatpickr() method on a jQuery selection.

```javascript
$".selector".flatpickr(optional_config);

```

--------------------------------

### Import Russian Locale with CommonJS

Source: https://flatpickr.js.org/localization

Use this snippet to import the Russian locale for a specific Flatpickr instance when using CommonJS modules.

```javascript
const flatpickr = require("flatpickr");
const Russian = require("flatpickr/dist/l10n/ru.js").default.ru;

flatpickr(myElem, {
    "locale": Russian // locale for this instance only
});

```

--------------------------------

### Set Min/Max Dates Relative to Today

Source: https://flatpickr.js.org/examples

Sets the minimum date to today and the maximum date to 14 days from the current date.

```javascript
{
    minDate: "today",
    maxDate: new Date().fp_incr(14) // 14 days from now
}

```

--------------------------------

### Set Global Russian Locale with CommonJS

Source: https://flatpickr.js.org/localization

This snippet demonstrates how to set the Russian locale as the default for all Flatpickr instances using CommonJS.

```javascript
const Russian = require("flatpickr/dist/l10n/ru.js").default.ru;
// or import { Russian } from "flatpickr/dist/l10n/ru.js"
flatpickr.localize(Russian); // default locale is now Russian

flatpickr(myElem);

```

--------------------------------

### Set Minimum Date to Today

Source: https://flatpickr.js.org/examples

Configures Flatpickr to only allow selection of today's date or future dates.

```javascript
{
    minDate: "today"
}

```

--------------------------------

### Accessing and Modifying Hooks

Source: https://flatpickr.js.org/events

Hooks can be accessed and modified via the instance's config object after instantiation. Functions are stored in arrays, allowing for dynamic addition or removal.

```javascript
instance.config.onChange.push(function() { });
```

--------------------------------

### Display Week Numbers

Source: https://flatpickr.js.org/examples

Enable the display of week numbers in a separate column. The `weekNumbers` option is used for this. You can optionally provide a custom `getWeek` function.

```javascript
{
    weekNumbers: true,
    /*
        optionally, you may override the function that
        extracts the week numbers from a Date by
        supplying a getWeek function. It takes in a date
        as a parameter and should return a corresponding string
        that you want to appear left of every week.
    */
    getWeek: function(dateObj) {
        // ...
    }
}
```

--------------------------------

### Enable Specific Dates

Source: https://flatpickr.js.org/examples

Enables only a specific list of dates and a specific date object for selection.

```javascript
{
    enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]
}

```

--------------------------------

### Disable Weekends Using a Function

Source: https://flatpickr.js.org/examples

Disables all Saturdays and Sundays using a custom function within the `disable` option. Also sets the first day of the week to Monday.

```javascript
{
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 0 || date.getDay() === 6);

        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
}

```

--------------------------------

### Enable Range Plugin

Source: https://flatpickr.js.org/plugins

The rangePlugin facilitates date range selection using two separate input fields. Specify the second input's ID using the 'input' option.

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

```

--------------------------------

### Enable Date Ranges

Source: https://flatpickr.js.org/examples

Enables only dates within two specified ranges for selection.

```javascript
{
    enable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}

```

--------------------------------

### Custom Date Parsing and Formatting Options

Source: https://flatpickr.js.org/examples

Configure Flatpickr to use custom functions for parsing and formatting dates. This is useful for supporting specific date formats not covered by default options.

```javascript
{
  altInput: true,
  dateFormat: "YYYY-MM-DD",
  altFormat: "DD-MM-YYYY",
  allowInput: true,
  parseDate: (datestr, format) => {
    return moment(datestr, format, true).toDate();
  },
  formatDate: (date, format, locale) => {
    // locale can also be used
    return moment(date).format(format);
  }
}
```

--------------------------------

### Customize Conjunction for Multiple Dates

Source: https://flatpickr.js.org/examples

Enables multiple date selection and customizes the separator used between selected dates.

```javascript
{
    mode: "multiple",
    dateFormat: "Y-m-d",
    conjunction: " :: "
}

```

--------------------------------

### Link Dark Theme CSS in Browser

Source: https://flatpickr.js.org/themes

Include this tag in your HTML to apply the dark theme when working directly in a browser environment.

```html
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">

```

--------------------------------

### Select Multiple Dates

Source: https://flatpickr.js.org/examples

Configures Flatpickr to allow the selection of multiple dates, with dates formatted as YYYY-MM-DD.

```javascript
{
    mode: "multiple",
    dateFormat: "Y-m-d"
}

```

--------------------------------

### Retrieve Flatpickr Instance if Not Saved

Source: https://flatpickr.js.org/instance-methods-properties-elements

If the flatpickr instance was not saved to a variable during initialization, it can be accessed via the internal `_flatpickr` property on the target element.

```javascript
flatpickr("#myInput", {}); // invocation without saving to a var
// ...

const fp = document.querySelector("#myInput")._flatpickr;
```

--------------------------------

### Range Calendar with Restrictions

Source: https://flatpickr.js.org/examples

Configures the range calendar to disallow selection of dates before today and disable dates that are multiples of 8.

```javascript
{
    mode: "range",
    minDate: "today",
    dateFormat: "Y-m-d",
    disable: [
        function(date) {
            // disable every multiple of 8
            return !(date.getDate() % 8);
        }
    ]
}

```

--------------------------------

### Inline Calendar Display

Source: https://flatpickr.js.org/examples

Make the calendar always visible by setting the `inline` option to true. This removes the need for an input element to trigger the calendar.

```javascript
{
    inline: true
}
```

--------------------------------

### Parse Date using Flatpickr Static Method

Source: https://flatpickr.js.org/instance-methods-properties-elements

Use the static `flatpickr.parseDate` method to convert a date string or timestamp into a JavaScript Date object, using a specified date format.

```javascript
flatpickr.parseDate("2016-10-20", "Y-m-d")
flatpickr.parseDate("31/01/1995", "d/m/Y")
```

--------------------------------

### IE9 Specific Stylesheet Inclusion

Source: https://flatpickr.js.org/ie9

Include this conditional IE9 stylesheet when targeting Internet Explorer 9 to ensure proper styling.

```html
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/ie.css">
<![endif]-->

```

--------------------------------

### CSS for Date Cell Indicators

Source: https://flatpickr.js.org/events

These CSS rules define the appearance of event indicators within the date cells, including a default event style and a 'busy' state.

```css
.event {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: #3d8eb9;
}

.event.busy {
    background: #f64747;
}
```

--------------------------------

### Disable Specific Dates

Source: https://flatpickr.js.org/examples

Disables a list of specific dates and a specific date object from selection. Requires `dateFormat` to be set.

```javascript
{
    disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
    dateFormat: "Y-m-d",
}

```

--------------------------------

### Disable Date Ranges

Source: https://flatpickr.js.org/examples

Disables two distinct ranges of dates. Requires `dateFormat` to be set.

```javascript
{
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ]
}

```

--------------------------------

### Disable Mobile Native Input

Source: https://flatpickr.js.org/mobile-support

Use the `disableMobile` option to prevent Flatpickr from using native datetime inputs on mobile browsers. This is generally not recommended.

```javascript
{
    disableMobile: "true"
}
```

--------------------------------

### Override Locale Field for Specific Instance

Source: https://flatpickr.js.org/localization

Override specific locale fields, such as the first day of the week, for an individual Flatpickr instance.

```javascript
flatpickr(myElem, {
    locale: {
        firstDayOfWeek: 2
    }
});

```
Tokens:
Raw