Date & Time picker

A simple and customizable date-time picker built with flatpickr.js, offering clean UI, easy setup, and precise date and time selection.

How to use

1. Install flatpickr.js

$ npm i flatpickr --save

2. Import CSS

Import styles after importing Tailwind and Hummingbird CSS:

@import '@hummingbirdui/hummingbird/src/plugins/flatpickr.css';

3. Initialization

import flatpickr from "flatpickr";

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

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

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

Date picker

HTML

<input id="datepicker" type="text" class="form-control" placeholder="dd-mm-yyyy" />
flatpickr('#datepicker', { dateFormat: 'd-m-Y' });

Time picker

HTML

<input id="timepicker" type="text" class="form-control" placeholder="hh:mm" />
flatpickr('#timepicker', { enableTime: true, noCalendar: true, dateFormat: 'H:i' });

Date Time picker

HTML

<input id="datetimepicker" type="text" class="form-control" placeholder="dd-mm-yyyy hh:mm" />
flatpickr('#datetimepicker', { enableTime: true, dateFormat: 'd-m-Y H:i' });

Date Range picker

HTML

<input id="rangepicker" type="text" class="form-control" placeholder="d-m-y to d-m-y" />
flatpickr('#rangepicker', { mode: 'range', dateFormat: 'd-m-Y' });

Multiple dates

HTML

<input id="multiple-dates" type="text" class="form-control" placeholder="dd-mm-yyyy" />
flatpickr('#multiple-dates', { mode: 'multiple', dateFormat: 'd-m-Y' });

Disabled dates

HTML

<input id="disabled-dates" type="text" class="form-control" placeholder="dd-mm-yyyy" />
flatpickr('#disabled-dates', {
  dateFormat: 'd-m-Y',
  disable: [
    function (date) {
      return date.getDay() === 5 || date.getDay() === 6;
    },
  ],
});

External elements

HTML

<div id="external-el" class="input-group-icon">
  <input type="text" class="form-control" placeholder="dd-mm-yyyy" data-input />
  <svg class="form-control-icon-end" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
</div>
flatpickr('#external-el', { wrap: true, dateFormat: 'd-m-Y' });

Inline Calendar

HTML

<div id="inline-calendar-el" class="input-group-icon">
  <input type="text" class="form-control" placeholder="dd-mm-yyyy" data-input />
  <svg class="form-control-icon-end" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
</div>
<div id="datepicker-inline"></div>
flatpickr('#inline-calendar-el', {
  wrap: true,
  inline: true,
  appendTo: document.querySelector('#datepicker-inline'),
});

CSS variables

Date & Time picker styles can be customized using the following CSS variables:

.flatpickr-calendar {
  --dtp-width: --spacing(77);
  --dtp-font-size: var(--text-sm);
  --dtp-color: var(--text-color-default);
  --dtp-shadow: var(--shadow-lg);
  --dtp-bg: var(--background-color-muted);
  --dtp-border-width: 1px;
  --dtp-border-color: transparent;
  --dtp-border-radius: var(--radius-md);

  --dtp-disabled-opacity: 0.15;
  --dtp-muted-day-opacity: 0.3;

  --dtp-months-padding-x: --spacing(4);
  --dtp-months-padding-y: --spacing(3);
  --dtp-month-padding: --spacing(1);
  --dtp-month-font-size: var(--text-lg);
  --dtp-month-font-weight: var(--font-weight-semibold);

  --dtp-year-width: --spacing(17);
  --dtp-year-padding: --spacing(1);
  --dtp-year-font-size: var(--text-lg);
  --dtp-year-font-weight: var(--font-weight-semibold);
  --dtp-year-hover-bg: transparent;

  --dtp-months-btn-size: --spacing(8);
  --dtp-months-btn-icon-size: --spacing(3.5);
  --dtp-months-btn-color: var(--text-color-muted);
  --dtp-months-btn-radius: var(--radius-md);
  --dtp-months-btn-bg: transparent;

  --dtp-inner-padding: --spacing(4);
  --dtp-weekday-color: var(--text-color-default);
  --dtp-weekday-font-size: var(--text-xs);
  --dtp-weekday-font-weight: var(--font-weight-semibold);
  --dtp-weekday-bg: transparent;

  --dtp-day-size: --spacing(9);
  --dtp-day-color: var(--text-color-default);
  --dtp-day-font-size: var(--text-xs);
  --dtp-day-font-weight: var(--font-weight-semibold);
  --dtp-day-border-radius: var(--radius-md);
  --dtp-day-bg: transparent;
  --dtp-day-hover-bg: var(--background-color-highlight);
  --dtp-day-selected-color: var(--color-white);
  --dtp-day-selected-bg: var(--color-primary);
  --dtp-day-range-color: var(--text-color-default);
  --dtp-day-range-bg: var(--background-color-highlight);

  --dtp-today-color: var(--color-white);
  --dtp-today-bg: var(--color-primary);
  --dtp-today-hover-bg: --alpha(var(--color-primary) / 90%);

  --dtp-timepickr-height: --spacing(10);
  --dtp-timepickr-border-width: 1px;
  --dtp-timepickr-border-color: var(--border-color-light);
  --dtp-timepickr-hover-bg: var(--background-color-subtle);
  --dtp-time-separator-color: var(--text-muted);

  --dtp-spinner-color: var(--border-color-dark);
  --dtp-spinner-width: --spacing(3.5);
  --dtp-spinner-arrow-size: --spacing(1);
  --dtp-spinner-border-width: 1px;
  --dtp-spinner-border-color: var(--border-color-light);
  --dtp-spinner-active-bg: var(--background-color-muted);
  --dtp-spinner-bg: transparent;
}