Date Picker
Create consistent cross-browser and cross-device time picker.
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>
With footer
<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>
var 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)
}
var 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>
var datePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-picker'))
var datePickerList = datePickerElementList.map(function (datePickerEl) {
return new coreui.DatePicker(datePickerEl)
})
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-coreui-
, as in data-coreui-cleaner=""
. 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, instead of using data-coreui-inputReadOnly="false"
, use data-coreui-input-read-only="false"
.
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 |
Specify the list of dates that cannot be selected. |
firstDayOfWeek |
number | 1 |
Sets the day of start week.
|
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. |
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 |
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. |
var myDatePicker = document.getElementById('myDatePicker')
myDatePicker.addEventListener('dateChange.coreui.date-picker', function (date) {
// do something...
})
Customizing
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-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;
CSS Vars
--cui-date-picker-ranges-border
--cui-date-picker-ranges-padding
--cui-date-picker-ranges-width
--cui-date-picker-timepicker-border-top
--cui-date-picker-timepicker-width