Calendar picker

Organize date selection for the user with the calendar picker component.

About

Updated in 4.2.21

You can organize date selection for the user with the calendar picker component. To create calendar picker component, add attribute data-role="calendarpicker" to form input element.


                    <input type="text" data-role="calendarpicker">
                

Picker value

You can setup value for picker with attribute value. If you value of date different from ECAMScript date value, you must define format with attribute data-input-format. Input format can contains next parts:

  • dd, %d - day
  • mm, %m - month
  • yy, %y, yyyy - year
  • hh, %h - hours
  • ii, %i, mi - minutes
  • ss, %s - seconds

                    <input type="text" data-role="calendarpicker"
                        data-input-format="%d/%m/%y" value="21/12/1972">
                

Output format

By default, output format for picker value defined in METRO_DATE_FORMAT var in have default value is %Y-%m-%d. You can redefine this global or with attribute data-format. Detailed about formatting date value, you can read in this article.

Default

%d %b %Y

%d %B %Y


                    <input type="text" data-role="calendarpicker">
                    <input type="text" data-role="calendarpicker" value="1972/12/21" data-format="%d %b %Y">
                    <input type="text" data-role="calendarpicker" data-format="%d %B %Y">
                

Dialog mode

If you need, (example for small screen), you can set picker into dialog mode. To set it use attribute data-dialog-mode="true" - persistent or data-dialog-point. If you set data-dialog-mode="true", picker always shown as dialog.


                    <input type="text" data-role="calendarpicker"  data-dialog-mode="true">
                

You can set specific size, when picker shown in dialog mode. Use for it attribute data-dialog-point. Value for this attribute must be a integer value. Metro use this value to build rule: max-width: Xpx.


                    <input type="text" data-role="calendarpicker"  data-dialog-point="360">
                

Compact mode

You can set compact mode for calendar. To set it, use attribute data-cls-calendar="compact"


                    <input type="text" data-role="calendarpicker"  data-cls-calendar="compact">
                

Wide mode

You can set wide mode for calendar. To set it, use attribute data-calendar-wide="true" - persistent or data-calendar-wide-point where point is one of the Metro 4 media point (fs, sm, md, lg, xl, xxl).


                    <input type="text" data-role="calendarpicker"  data-calendar-wide-point="md">
                

Picker options

Calendar picker has several options, who effects to behavior of the component.

Option Data-* Default Desc
dialogMode data-dialog-mode false Set picker into dialog mode
dialogPoint data-dialog-point 360 Set max screen width when picker switch into dialog mode
dialogOverlay data-dialog-overlay true Create overlay for dialog mode
overlayColor data-overlay-color #000000 Overlay color
overlayAlpha data-overlay-alpha .5 Overlay alpha color channel
size data-locale METRO_LOCALE {en-US} Component language
size data-size 100% Component size
format data-format %Y/%m/%d Output date format
inputFormat data-input-format null Input date format
clearButton data-clear-button false Show/hide clear button
clearButtonIcon data-clear-button-icon <span class='mif-cross'></span> Icon for clear button
calendarButtonIcon data-calendar-button-icon <span class='mif-calendar'></span> Icon for show calendar button
clsPicker data-cls-picker Additional class for calendarpicker

Calendar options

Calendar picker has several options, who effects to behavior of the picker calendar.

Option Data-* Default Desc
yearsBefore data-years-before 100 Years before today
yearsAfter data-years-after 100 Years after today
weekStart data-week-start 0 Start month from sunday or monday (0 - sunday, 1 - monday)
outside data-outside true Show dates outside from month (prev or next month dates)
ripple data-ripple false Add ripple effect to click
rippleColor data-ripple-color #cccccc Ripple color
exclude data-exclude null Dates can be excluded from selection
special data-special null Dates, who can be selected
minDate data-min-date null Min date
maxDate data-max-date null Max date
showHeader data-show-header true Show or hide calendar header
clsToday data-cls-today Additional class for today
clsSelected data-cls-selected Additional class for selected
clsExclude data-cls-exclude Additional class for excluded
clsCalendar data-cls-calendar Additional class calendar
clsCalendarHeader data-cls-calendar-header Additional class for calendar header
clsCalendarContent data-cls-calendar-content Additional class for calendar content
clsCalendarMonths data-cls-calendar-months Additional class for calendar months
clsCalendarYears data-cls-calendar-years Additional class for calendar years

Events

When picker works, it generated the numbers of events. You can use callback for this event to behavior with picker. Rules for working with events are described on this page.

Event Data-* Default Desc
onDayClick(sel, day, el) data-on-day-click Metro.noop Callback for day click
onCalendarShow(el, cal) data-on-calendar-show Metro.noop Callback for calendar was showed
onCalendarHide(el, cal) data-on-calendar-hide Metro.noop Callback for calendar was hiding
onChange(val, date, el) data-on-change Metro.noop Callback for picker value was changed
onMonthChange(...) data-on-month-change Metro.noop Callback for picker month value was changed
onYearChange(...) data-on-year-change Metro.noop Callback for picker year value was changed
onCalendarPickerCreate(el) data-on-calendar-picker-create Metro.noop Callback fired when picker is created

Select date in first picker and see change values in second picker


                    <input type="text"
                        data-role="calendarpicker" id="dp2"
                        data-on-change="$('#dp1').attr('value', (arguments[1]))">

                    <input type="text"
                        data-role="calendarpicker" id="dp1" data-format="%d %b %Y">
                

Methods

You can use picker method val() to set or get picker value in javascript. Also you can set or get picker value with using value attribute.



                    var cal = $(element).data("calendarpicker");
                    console.log(cal.val());
                    cal.val("1972/12/21");
                

Observe

You can change attributes value, disabled data-locale at runtime and picker will be updated.


                    <div class="d-flex flex-justify-center mb-4">
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">en-US</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">de-DE</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">hu-HU</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">uk-UA</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">ru-RU</button>
                    </div>

                    <input type="text" data-role="calendarpicker" id="calendarpicker_locale">