Tailwind CSS Flatpickr (Datepicker)

Getting started

Setup

Below are the steps to seamlessly integrate Flatpickr JS into your project.

1
Step 1: Installation
Install flatpickr using npm:
npm i flatpickr
2
Step 2: Include Flatpickr JavaScript and CSS
Include the necessary CSS and JavaScript files in the following locations:
<head> <link rel="stylesheet" href="../path/to/flatpickr/dist/flatpickr.css" /> </head> <body> <script src="../path/to/flatpickr/flatpickr.js"></script> </body>
Note: A CDN link won't work here because we need to modify the default Vendor CSS to fit FlyonUI's design.
3
Step 3: Update Tailwind Configuration
To enable CSS overrides, include the path to the vendor JS files in the content section of your Tailwind configuration file. Additionally, set vendors="true" in the FlyonUI config to ensure the override CSS is generated:
module.exports = { content: [ '.../path/to/flatpickr/**/*.js', // Include all relevant JS files from Flatpickr ], flyonui: { vendors: true // Enable vendor-specific CSS generation } }

Step 4: Basic Usage

The following are valid ways to create a Flatpickr instance:

// If using Flatpickr in a framework, it's recommended to pass the element directly
flatpickr(element, {});

// Alternatively, selectors are supported
flatpickr("#myID", {});

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

Basic examples

Date picker

Basic date picker example.

Time picker

Basic time picker example.

Types

Default

Default datepicker.

Floating

Floating label example.

<div class="relative">
  <input type="text" class="input input-floating peer max-w-sm" placeholder="YYYY-MM-DD" id="flatpickr-floating" />
  <label class="input-floating-label" for="flatpickr-floating">Date</label>
</div>

Validation states

Success state

Success state can be show using is-valid class.

<div class="max-w-sm">
  <label class="label label-text" for="flatpickrStateSuccess"> Date </label>
  <input type="text" class="input is-valid flatpickr-success" id="flatpickrStateSuccess" placeholder="YYYY-MM-DD" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

<div class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <input type="text" class="input input-floating is-valid flatpickr-success peer" id="flatpickrFloatingStateSuccess" placeholder="YYYY-MM-DD" />
    <label class="input-floating-label" for="flatpickrFloatingStateSuccess">Date</label>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

Error state

Error state can be show using is-invalid class.

<div class="max-w-sm">
  <label class="label label-text" for="flatpickrStateError"> Date </label>
  <input type="text" class="input is-invalid flatpickr-error" id="flatpickrStateError" placeholder="YYYY-MM-DD" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

<div class="max-w-sm">
  <div class="label justify-end">
    <span class="label-text-alt">Top Right label</span>
  </div>
  <div class="relative">
    <input type="text" class="input input-floating is-invalid flatpickr-error peer" id="flatpickrFloatingStateError" placeholder="YYYY-MM-DD" />
    <label class="input-floating-label" for="flatpickrFloatingStateError">Date</label>
  </div>
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</div>

Illustrations

DateTime picker

Example showcasing a picker with both date and time selection.

Multiple dates picker

Example demonstrating how to select multiple dates.

Range picker

Select range of date.

Human friendly

Human Friendly date picker example.

<script>
  window.addEventListener('load', function () {
    // Human Friendly
    flatpickr('#flatpickr-human-friendly', {
      altInput: true,
      altFormat: 'F j, Y',
      dateFormat: 'Y-m-d'
    })
  })
</script>

Inline picker

Basic inline picker example.

<script>
  window.addEventListener('load', function () {
    // Inline Date Picker
    flatpickr('#flatpickr-inline', {
      inline: true,
      allowInput: false,
      monthSelectorType: 'static'
    })
  })
</script>

Disabled dates

The example below demonstrates how to disable a specific date range.

<script>
  window.addEventListener('load', function () {
    // Disable Date Picker
    const fromDate = new Date(Date.now() - 3600 * 1000 * 48)
    const toDate = new Date(Date.now() + 3600 * 1000 * 48)
    flatpickr('#flatpickr-disabled-range', {
      dateFormat: 'Y-m-d',
      disable: [
        {
          from: fromDate.toISOString().split('T')[0],
          to: toDate.toISOString().split('T')[0]
        }
      ]
    })
  })
</script>

Localization

The date picker below has been localized to display months and days in Russian. For more information, please refer to the official documentation on localization.

Display week numbers

Example displaying week number.