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 UI 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.

Calendar options

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

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.

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