Download Hire Us Buy CoreUI PRO

CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

Date Picker

Create consistent cross-browser and cross-device time picker.

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

Example

  <div class="row">
    <div class="col-lg-4">
      <div data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
    </div>
    <div class="col-lg-4">
      <div data-coreui-date="2023/03/15" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div data-coreui-footer="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
    </div>
    <div class="col-lg-4">
      <div data-coreui-date="2023/03/15" data-coreui-footer="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
    </div>
  </div>

With timepicker

  <div class="row">
    <div class="col-lg-4">
      <div data-coreui-locale="en-US" data-coreui-timepicker="true" data-coreui-toggle="date-picker"></div>
    </div>
    <div class="col-lg-4">
      <div data-coreui-date="2023/03/15 02:22:13 PM" data-coreui-locale="en-US" data-coreui-timepicker="true" data-coreui-toggle="date-picker"></div>
    </div>
  </div>

Sizing

Set heights using data-coreui-size attribute like data-coreui-size="lg" and data-coreui-size="sm".

<div class="row mb-4">
  <div class="col-lg-5">
    <div data-coreui-locale="en-US" data-coreui-size="lg" data-coreui-toggle="date-picker"></div>
  </div>
</div>
<div class="row">
  <div class="col-lg-4">
    <div data-coreui-locale="en-US" data-coreui-size="sm" data-coreui-toggle="date-picker"></div>
  </div>
</div>

Disabled

Add the data-coreui-disabled="true" attribute on an input to give it a grayed out appearance and remove pointer events.

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-disabled="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
  </div>
</div>

Readonly

Add the data-coreui-input-read-only="true" boolean attribute to prevent modification of the input’s value.

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-input-read-only="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
  </div>
</div>

Disabled dates

<div class="row">
  <div class="col-lg-4">
    <div id="myDatePickerDisabledDates"></div>
  </div>
</div>
const options = {
  locale: 'en-US',
  calendarDate: new Date(2022, 2, 1),
  disabledDates: [
    [new Date(2022, 2, 4), new Date(2022, 2, 7)],
    new Date(2022, 2, 16),
    new Date(2022, 3, 16),
    [new Date(2022, 4, 2), new Date(2022, 4, 8)]
  ],
  maxDate: new Date(2022, 5, 0),
  minDate: new Date(2022, 1, 1)
}

const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), options)

Non-english locale

Auto

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-toggle="date-picker"></div>
  </div>
</div>

Chinese

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-locale="zh-CN" data-coreui-placeholder="入住日期" data-coreui-toggle="date-picker"></div>
  </div>
</div>

Japanese

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-locale="ja" data-coreui-placeholder="日付を選択" data-coreui-toggle="date-picker"></div>
  </div>
</div>

Korean

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-locale="ko" data-coreui-placeholder="날짜 선택" data-coreui-toggle="date-picker"></div>
  </div>
</div>

Right to left support

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-locale="he-IL" data-coreui-placeholder="בחר תאריך" data-coreui-toggle="date-picker" dir="rtl"></div>
  </div>
</div>

Persian

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-locale="fa-IR" data-coreui-placeholder="تاریخ شروع" data-coreui-toggle="date-picker" dir="rtl"></div>
  </div>
</div>

Usage

Via data attributes

Add data-coreui-toggle="date-picker" to a div element.

<div data-coreui-toggle="date-picker"></div>

Via JavaScript

Call the time picker via JavaScript:

<div class="date-picker"></div>

const datePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-picker'))
const datePickerList = datePickerElementList.map(datePickerEl => {
  return new coreui.DatePicker(datePickerEl)
})

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-coreui-, as in data-coreui-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-coreui-custom-class="beautifier" instead of data-coreui-customClass="beautifier".

As of CoreUI 4.2.0, all components support an experimental reserved data attribute data-coreui-config that can house simple component configuration as a JSON string. When an element has data-coreui-config='{"delay":0, "title":123}' and data-coreui-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-coreui-config. In addition, existing data attributes are able to house JSON values like data-coreui-delay='{"show":0,"hide":150}'.

Name Type Default Description
calendarDate date | string | null null Default date of the component.
cancelButtonLabel string 'Cancel' Cancel button inner HTML
cancelButtonClasses array | string ['btn', 'btn-sm', 'btn-ghost-primary'] CSS class names that will be added to the cancel button
cleaner boolean true Enables selection cleaner element.
date date | string | null null Initial selected date.
confirmButtonLabel string 'OK' Confirm button inner HTML
confirmButtonClasses array | string ['btn', 'btn-sm', 'btn-primary'] CSS class names that will be added to the confirm button
date date | string | null null Default value of the component
disabled boolean false Toggle the disabled state for the component.
disabledDates array null null
firstDayOfWeek number 1

Sets the day of start week.

  • 0 - Sunday
  • 1 - Monday
  • 2 - Tuesday
  • 3 - Wednesday
  • 4 - Thursday
  • 5 - Friday
  • 6 - Saturday
footer boolean false Toggle visibility of footer element.
format string Set date format. We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
indicator boolean true Toggle visibility or set the content of the input indicator.
inputReadOnly boolean false Toggle the readonly state for the component.
invalid boolean false Toggle the invalid state for the component.
locale string 'default' Sets the default locale for components. If not set, it is inherited from the navigator.language.
maxDate date | string | null null Max selectable date.
minDate date | string | null null Min selectable date.
placeholder string 'Select time' Specifies a short hint that is visible in the input.
size 'sm' | 'lg' null Size the component small or large.
timepicker boolean false Provide an additional time selection by adding select boxes to choose times.
todayButton string 'Today' Today button inner HTML
todayButtonClasses array | string ['btn', 'btn-sm', 'me-2'] CSS class names that will be added to the today button
valid boolean false Toggle the valid state for the component.
weekdayFormat number | ’long’ | ’narrow’ | ‘short’ 2 Set length or format of day name.

Methods

Method Description
clear Clear selection of the date picker.
reset Reset selection of the date picker to the initial value.
update Updates the configuration of the date picker.
dispose Destroys a component. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the date picker instance associated to a DOM element, you can use it like this: coreui.DatePicker.getInstance(element)
getOrCreateInstance Static method which returns a date picker instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: coreui.DatePicker.getOrCreateInstance(element)

Events

Method Description
dateChange.coreui.date-picker Callback fired when the date changed. 
const myDatePicker = document.getElementById('myDatePicker')
myDatePicker.addEventListener('dateChange.coreui.date-picker', date => {
  // do something...
})

Customizing

CSS variables

DatePickers use local CSS variables on .date-picker and .calendar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --cui-date-picker-ranges-width: #{$date-picker-ranges-width};
  --cui-date-picker-ranges-padding: #{$date-picker-ranges-padding};
  --cui-date-picker-ranges-border: #{$date-picker-ranges-border-width} solid #{$date-picker-ranges-border-color};
  --cui-date-picker-timepicker-width: #{$date-picker-timepicker-width};
  --cui-date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid #{$date-picker-timepicker-border-color};
  
  --cui-calendar-table-margin: #{$calendar-table-margin};
  --cui-calendar-table-cell-size: #{$calendar-table-cell-size};
  --cui-calendar-nav-padding: #{$calendar-nav-padding};
  --cui-calendar-nav-border: #{$calendar-nav-border-width} solid #{$calendar-nav-border-color};
  --cui-calendar-nav-date-color: #{$calendar-nav-date-color};
  --cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
  --cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};
  --cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};
  --cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
  --cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
  --cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
  --cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};
  --cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
  --cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};
  --cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
  --cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
  --cui-calendar-cell-today-color: #{$calendar-cell-today-color};

SASS variables

$date-picker-default-icon-color:       $gray-600;
$date-picker-default-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$date-picker-default-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$date-picker-default-icon-color}'></rect></svg>");
$date-picker-invalid-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-invalid-color}'></rect></svg>");
$date-picker-valid-icon:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-valid-color}'></rect></svg>");

$date-picker-cleaner-icon-color:       $gray-600;
$date-picker-cleaner-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>");
$date-picker-cleaner-icon-hover-color: $body-color;
$date-picker-cleaner-icon-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-hover-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-hover-color})' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>");

$date-picker-separator-icon-color:     $gray-600;
$date-picker-separator-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>");
$date-picker-separator-icon-rtl:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>");

$date-picker-ranges-width:             10rem;
$date-picker-ranges-padding:           $spacer * .5;
$date-picker-ranges-border-width:      1px;
$date-picker-ranges-border-color:      $border-color;

$date-picker-timepicker-width:         (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin);
$date-picker-timepicker-border-width:  1px;
$date-picker-timepicker-border-color:  $border-color;

$calendar-table-margin:                     .5rem;
$calendar-table-cell-size:                  2.75rem;

$calendar-nav-padding:                      .5rem;
$calendar-nav-border-width:                 1px;
$calendar-nav-border-color:                 $border-color;
$calendar-nav-date-color:                   $body-color;
$calendar-nav-date-hover-color:             $primary;
$calendar-nav-icon-width:                   1rem;
$calendar-nav-icon-height:                  1rem;

$calendar-nav-icon-double-next-color:       $gray-600;
$calendar-nav-icon-double-next:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>");
$calendar-nav-icon-double-next-hover-color: $body-color;
$calendar-nav-icon-double-next-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>");

$calendar-nav-icon-double-prev-color:       $gray-600;
$calendar-nav-icon-double-prev:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>");
$calendar-nav-icon-double-prev-hover-color: $body-color;
$calendar-nav-icon-double-prev-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>");

$calendar-nav-icon-next-color:              $gray-600;
$calendar-nav-icon-next:                    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>");
$calendar-nav-icon-next-hover-color:        $body-color;
$calendar-nav-icon-next-hover:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-hover-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>");

$calendar-nav-icon-prev-color:              $gray-600;
$calendar-nav-icon-prev:                    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>");
$calendar-nav-icon-prev-hover-color:        $body-color;
$calendar-nav-icon-prev-hover:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-hover-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>");

$calendar-cell-header-inner-color:          $text-medium-emphasis;

$calendar-cell-hover-bg:                    $gray-200;
$calendar-cell-disabled-color:              $text-disabled;

$calendar-cell-selected-color:              $white;
$calendar-cell-selected-bg:                 $primary;

$calendar-cell-range-bg:                    rgba($primary, .125);
$calendar-cell-range-hover-bg:              rgba($primary, .25);
$calendar-cell-range-hover-border-color:    $primary;

$calendar-cell-today-color:                 $danger;