How Do You Make a Calendar Where You Can Choose Different Dates Html

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.

                      <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
locale	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[0]))">                      <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">                  

How Do You Make a Calendar Where You Can Choose Different Dates Html

Source: https://metroui.org.ua/calendarpicker.html

Share this post