View on GitHub

Date & time picker

The date & time picker is designed for intuitive and user-friendly date and time selection in web forms.

On this page

The component uses the Flatpickr library behind the scenes.

Examples

Basic

Datepicker without any config.

html

<input type="text" class="form-control form-datepicker" data-of-datepicker placeholder="Select Date...">

Human-friendly dates

For a more user-friendly date and time format:

{
    "enableTime": true,
    "dateFormat": "d.m.Y H:i"
}

html

<input type="text" class="form-control form-datepicker" data-of-datepicker='{"enableTime": true, "dateFormat": "d.m.Y H:i"}' placeholder="Select Date...">

Range calendar

Select a range of dates using the range calendar.

{
    "mode": "range"
}

html

<input type="text" class="form-control form-datepicker" data-of-datepicker='{"mode": "range"}' placeholder="Select Date...">

Time picker

For time-only selection:

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

html

<input type="text" class="form-control form-timepicker" data-of-datepicker='{"enableTime": true, "noCalendar": true, "dateFormat": "H:i"}' placeholder="Select time...">

Inline calendar

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

{
    "inline": true
}

html

<input type="text" class="form-control form-datepicker" data-of-datepicker='{"inline": true}' placeholder="Select Date...">

Usage

To initialize the picker for form fields, add the attribute data-of-datepicker to the input element. The attribute can accept configurations in the form of a JSON string, allowing for easy customization of the picker’s behavior.

For a distinct visual appearance, you have the option of choosing between two classes for the input field:

form-datepicker - this class adorns the input with a calendar icon, signaling its purpose for date selection.
form-timepicker - with this class, the input receives a clock icon, indicating its utility for time selection.

Options

You can pass extra options as JSON value of the data attribute.

Here is the list of all available options (alphabetically):

Option	Type	Default	Explanation
`dateFormat`	`String`	`"d.m.Y"`	A string of characters which are used to define how the date will be displayed in the input box.
`defaultDate`	`String`	`undefined`	Sets the initial selected date(s).
`defaultHour`	`Number`	`12`	Initial value of the hour element.
`defaultMinute`	`Number`	`0`	Initial value of the minute element.
`enableTime`	`Boolean`	`false`	Enables time picker
`inline`	`Boolean`	`false`	Displays the calendar inline
`maxDate`	`String/Date`	`undefined`	The maximum date that a user can pick to (inclusive).
`minDate`	`String/Date`	`undefined`	The minimum date that a user can start picking from (inclusive).
`mode`	`String`	`"single"`	“single”, “multiple”, or “range”
`noCalendar`	`Boolean`	`false`	Hides the day selection in calendar. Use it along with enableTime to create a time picker.
`rangeSeparator`	`String`	`' - '`	The input separator between “from” and “to” dates.

CSS

Input styles

Differentiate between date and time input fields with unique icons.

Sass variables

src/scss/_variables.scss

$form-datepicker-indicator-padding:           $input-btn-padding-x * 3; // Extra padding for background-image
$form-datepicker-bg-position:                 left $input-btn-padding-x center;
$form-datepicker-bg-size:                     16px 16px; // In pixels because image dimensions
$form-datepicker-indicator-color:             #000;
$form-timepicker-indicator-color:             $form-datepicker-indicator-color;
$form-datepicker-indicator:                   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#{$form-datepicker-indicator-color}' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z'/></svg>");
$form-timepicker-indicator:                   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#{$form-timepicker-indicator-color}' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/></svg>");

src/scss/_variables-dark.scss

$form-datepicker-indicator-color-dark:  $body-color-dark;
$form-timepicker-indicator-color-dark:  $form-datepicker-indicator-color-dark;
$form-datepicker-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#{$form-datepicker-indicator-color-dark}' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z'/></svg>");
$form-timepicker-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#{$form-timepicker-indicator-color-dark}' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/></svg>");

Calendar styles

Customize the look and feel of your calendar.

Variables

src/scss/form/_flatpickr.scss

--calendarpicker-arrow-hover-color: #{$calendarpicker-arrow-hover-color};
--calendarpicker-background: #{$calendarpicker-background};
--calendarpicker-border-color: #{$calendarpicker-border-color};
--calendarpicker-month-foreground: #{$calendarpicker-month-foreground};
--calendarpicker-month-background: #{$calendarpicker-month-background};
--calendarpicker-weekdays-background: #{$calendarpicker-weekdays-background};
--calendarpicker-weekdays-foreground: #{$calendarpicker-weekdays-foreground};
--calendarpicker-day-foreground: #{$calendarpicker-day-foreground};
--calendarpicker-day-hover-background: #{$calendarpicker-day-hover-background};
--calendarpicker-day-hover-color: #{$calendarpicker-day-hover-color};
--calendarpicker-today-color: #{$calendarpicker-today-color};
--calendarpicker-selected-day-background: #{$calendarpicker-selected-day-background};
--calendarpicker-selected-day-color: #{$calendarpicker-selected-day-color};
--calendarpicker-disabled-color: #{$calendarpicker-disabled-color};
--calendarpicker-time-hover: #{$calendarpicker-time-hover};

Sass variables

src/scss/_variables.scss

$calendarpicker-arrow-hover-color:                   $primary;
$calendarpicker-background:                          var(--#{$prefix}body-bg);
$calendarpicker-border-color:                        var(--#{$prefix}border-color-translucent);
$calendarpicker-month-foreground:                    var(--#{$prefix}body-color);
$calendarpicker-month-background:                    transparent;
$calendarpicker-weekdays-background:                 transparent;
$calendarpicker-weekdays-foreground:                 var(--#{$prefix}body-color);
$calendarpicker-day-foreground:                      var(--#{$prefix}body-color);
$calendarpicker-day-hover-background:                var(--#{$prefix}primary);
$calendarpicker-day-hover-color:                     $white;
$calendarpicker-today-color:                         var(--#{$prefix}gray-500);
$calendarpicker-selected-day-background:             var(--#{$prefix}primary);
$calendarpicker-selected-day-color:                  $white;
$calendarpicker-disabled-color:                      var(--#{$prefix}gray-500);
$calendarpicker-time-hover:                          rgba(0, 0, 0, .05);