Calendar picker

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

Create calendar picker

To create calendarpicker component add attribute data-role="calendarpicker" to form input element.


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


                    <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">

Picker options

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

Option	Data-*	Default	Desc
size	`data-locale`	METRO_LOCALE {en-US}	Component language
size	`data-size`	100%	Component size
format	`data-format`	%Y/%m/%d	Output 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
copyInlineStyles	`data-copy-inline-styles`	false	Copy inline styles input to wrapper
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
preset	`data-preset`	null	Dates can be preselect
minDate	`data-min-date`	null	Min date
maxDate	`data-max-date`	null	Max date
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
clsCalendarFooter	`data-cls-calendar-footer`		Additional class for calendar footer
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
`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">