Examples

Unless otherwise specified, the markup for examples below consists of just an input element, and flatpickr invocation with a given config.

Basic

flatpickr without any config. Some features right off the bat:

  • The year is scrollable and can be typed in
  • The month name is scrollable

DateTime

{
    enableTime: true
}

Human-friendly Dates

altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a Y-m-d... string, while the altInput will display the date in a more legible, customizable format.

Enabling this option is highly recommended.

{
    altInput: true
}

Supplying Dates for flatpickr

flatpickr has numerous options that accept date values in a variety of formats. Those are:

  • defaultDate
  • minDate
  • maxDate
  • enable/disable

The values accepted by these options all follow the same guidelines.

You may specify those dates in a variety of formats:

  • Date Objects are always accepted
    • new Date(2015, 0, 10)
  • Timestamps are always accepted
    • e.g. 1488136398547
  • ISO Date Strings are always accepted
    • e.g. "2017-02-26T19:40:03.243Z"
  • Date Strings, which must match the dateFormat chronologically

    • dateFormat defaults to YYYY-MM-DD HH:MM
    • This means that "2016" "2016-10", "2016-10-20", "2016-10-20 15", "2016-10-20 15:30" are all valid date strings
  • The shortcut "today"

Preloading a Date

The selected date will get parsed from the input’s value or the defaultDate option.

See supplying dates for valid date examples.

minDate and maxDate

minDate option specifies the minimum/earliest date (inclusively) allowed for selection.

maxDate option specifies the maximum/latest date (inclusively) allowed for selection.

{
    minDate: "2017-04"
}

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

{
    minDate: "today"
}

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

Disabling specific dates

If you’d like to make certain dates unavailable for selection, there are multiple methods of doing so.

  1. Disabling specific date
  2. Disabling a date range
  3. Disabling dates using a function

All of those are possible with the disable option.


1: Disabling specific dates

{
    disable: ["2017-03-30", "2017-05-21", "2017-06-08", new Date(2017, 8, 9) ]
}

2: Disabling range(s) of dates:

{
    disable: [
        {
            from: "2017-04-01",
            to: "2017-06-01"
        },
        {
            from: "2017-09-01",
            to: "2017-12-01"
        }
    ]
}

3: Disabling dates by a function:

The function takes in a Date object, and should return a boolean value. If the function returns true, the date will be disabled.

This flexibility allows you to use any arbitrary logic to disable dates.

{
    disable: [
        function(date) {
            // return true to disable

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

        }
    ]
}

Disabling all dates except select few

This is the enable option, which takes in an array of date strings, date ranges and functions. Essentially the same as the disable option above, but reversed.

1: Enabling specific dates

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

2: Enabling range(s) of dates:

{
    enable: [
        {
            from: "2017-04-01",
            to: "2017-06-01"
        },
        {
            from: "2017-09-01",
            to: "2017-12-01"
        }
    ]
}

3: Enabling dates by a function:

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

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

        }
    ]
}

Selecting multiple dates

It is possible to select multiple dates.

{
    mode: "multiple"
}

Range Calendar

Select a range of dates using the range calendar.

{
    mode: "range"
}

Note that disabled dates (by either minDate, maxDate, enable or disable) will not be allowed in selections.

{
    mode: "range",
    minDate: "today",
    disable: [
        function(date) {
            // disable every multiple of 8
            return !(date.getDate() % 8);
        }
    ]
}

Inline Calendar

Display the calendar in an always-open state with the inline option.

{
    inline: true
}

Display Week Numbers

Enable the weekNumbers option to display the week number in a column left to the calendar.

{
    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) {
        // ...
    }
}

flatpickr + external elements

flatpickr can parse an input group of textboxes and buttons, common in Bootstrap and other frameworks.

This permits additional markup, as well as custom elements to trigger the state of the calendar.

<div class=flatpickr>
    <input type="text" placeholder="Select Date.." data-input>

    <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>
{
    wrap: true
}