metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Organize date selection for the user with the calendar picker component. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Calendar picker - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Calendar picker</a></li> <li class="toc-entry"><a href="#_calendarpicker_about">About</a></li> <li class="toc-entry"><a href="#_calendarpicker_value">Picker value</a></li> <li class="toc-entry"><a href="#_calendarpicker_output">Output value</a></li> <li class="toc-entry"><a href="#_calendarpicker_dialog_mode">Dialog mode</a></li> <li class="toc-entry"><a href="#_calendarpicker_compact">Compact calendar</a></li> <li class="toc-entry"><a href="#_calendarpicker_wide">Wide calendar</a></li> <li class="toc-entry"><a href="#_calendarpicker_options">Picker options</a></li> <li class="toc-entry"><a href="#_calendarpicker_calendar">Calendar options</a></li> <li class="toc-entry"><a href="#_calendarpicker_events">Events</a></li> <li class="toc-entry"><a href="#_calendarpicker_methods">Methods</a></li> <li class="toc-entry"><a href="#_calendarpicker_observe">Observe</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Calendar picker</h1> <p class="text-leader"> Organize date selection for the user with the calendar picker component. </p>  <h3 id="_calendarpicker_about">About</h3> <p class="text-small">Updated in 4.2.21</p> <p> You can organize date selection for the user with the calendar picker component. To create <code>calendar picker</code> component, add attribute <code>data-role="calendarpicker"</code> to form input element. </p> <div class="example"> <input type="text" data-role="calendarpicker" data-size="280" class="mx-auto" data-dialog-point="360"> </div> <pre><code class="html"> <input type="text" data-role="calendarpicker"> </code></pre> <h3 id="_calendarpicker_value">Picker value</h3> <p> You can setup value for picker with attribute <code>value</code>. If you value of date different from ECAMScript date value, you must define format with attribute <code>data-input-format</code>. Input format can contains next parts: </p> <ul class="unstyled-list"> <li><code>dd</code>, <code>%d</code> - day</li> <li><code>mm</code>, <code>%m</code> - month</li> <li><code>yy</code>, <code>%y</code>, <code>yyyy</code> - year</li> <li><code>hh</code>, <code>%h</code> - hours</li> <li><code>ii</code>, <code>%i</code>, <code>mi</code> - minutes</li> <li><code>ss</code>, <code>%s</code> - seconds</li> </ul> <div class="example"> <input type="text" data-role="calendarpicker" data-size="280" class="mx-auto" data-input-format="%d/%m/%y" value="21/12/1972" data-dialog-point="360"> </div> <pre><code class="html"> <input type="text" data-role="calendarpicker" data-input-format="%d/%m/%y" value="21/12/1972"> </code></pre> <h3 id="_calendarpicker_output">Output format</h3> <p> By default, output format for picker value defined in <code>METRO_DATE_FORMAT</code> var in have default value is <code>%Y-%m-%d</code>. You can redefine this global or with attribute <code>data-format</code>. Detailed about formatting date value, you can read in <a href="dateformat.html">this article</a>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <p>Default</p> <input type="text" data-role="calendarpicker" data-dialog-point="360"> </div> <div class="cell-md-4"> <p>%d %b %Y</p> <input type="text" data-role="calendarpicker" value="1972/12/21" data-format="%d %b %Y" data-dialog-point="360"> </div> <div class="cell-md-4"> <p>%d %B %Y</p> <input type="text" data-role="calendarpicker" data-format="%d %B %Y" data-dialog-point="360"> </div> </div> </div> <pre><code class="html"> <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"> </code></pre>  <h3 id="_calendarpicker_dialog_mode">Dialog mode</h3> <p> If you need, (example for small screen), you can set picker into dialog mode. To set it use attribute <code>data-dialog-mode="true"</code> - persistent or <code>data-dialog-point</code>. If you set <code>data-dialog-mode="true"</code>, picker always shown as dialog. </p> <div class="example"> <input type="text" data-role="calendarpicker" data-dialog-mode="true"> </div> <pre><code> <input type="text" data-role="calendarpicker" data-dialog-mode="true"> </code></pre> <p> You can set specific size, when picker shown in dialog mode. Use for it attribute <code>data-dialog-point</code>. Value for this attribute must be a integer value. Metro use this value to build rule: <code>max-width: Xpx</code>. </p> <div class="example"> <input type="text" data-role="calendarpicker" data-dialog-point="360"> </div> <pre><code> <input type="text" data-role="calendarpicker" data-dialog-point="360"> </code></pre> <h3 id="_calendarpicker_compact">Compact mode</h3> <p> You can set <code>compact</code> mode for calendar. To set it, use attribute <code>data-cls-calendar="compact"</code> </p> <div class="example"> <input type="text" data-role="calendarpicker" data-cls-calendar="compact"> </div> <pre><code> <input type="text" data-role="calendarpicker" data-cls-calendar="compact"> </code></pre> <h3 id="_calendarpicker_wide">Wide mode</h3> <p> You can set <code>wide</code> mode for calendar. To set it, use attribute <code>data-calendar-wide="true"</code> - persistent or <code>data-calendar-wide-point</code> where <code>point</code> is one of the <a href="media.html">Metro 4 media point</a> (fs, sm, md, lg, xl, xxl). </p> <div class="example"> <input type="text" data-role="calendarpicker" data-calendar-wide-point="md"> </div> <pre><code> <input type="text" data-role="calendarpicker" data-calendar-wide-point="md"> </code></pre> <h3 id="_calendarpicker_options">Picker options</h3> <p> Calendar picker has several options, who effects to behavior of the component. </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>dialogMode</td> <td><code>data-dialog-mode</code></td> <td>false</td> <td>Set picker into dialog mode</td> </tr> <tr> <td>dialogPoint</td> <td><code>data-dialog-point</code></td> <td>360</td> <td>Set max screen width when picker switch into dialog mode</td> </tr> <tr> <td>dialogOverlay</td> <td><code>data-dialog-overlay</code></td> <td>true</td> <td>Create overlay for dialog mode</td> </tr> <tr> <td>overlayColor</td> <td><code>data-overlay-color</code></td> <td>#000000</td> <td>Overlay color</td> </tr> <tr> <td>overlayAlpha</td> <td><code>data-overlay-alpha</code></td> <td>.5</td> <td>Overlay alpha color channel</td> </tr> <tr> <td>locale</td> <td><code>data-locale</code></td> <td>METRO_LOCALE {en-US}</td> <td>Component language</td> </tr> <tr> <td>size</td> <td><code>data-size</code></td> <td>100%</td> <td>Component size</td> </tr> <tr> <td>format</td> <td><code>data-format</code></td> <td>%Y/%m/%d</td> <td>Output date format</td> </tr> <tr> <td>inputFormat</td> <td><code>data-input-format</code></td> <td>null</td> <td>Input date format</td> </tr> <tr> <td>clearButton</td> <td><code>data-clear-button</code></td> <td>false</td> <td>Show/hide clear button</td> </tr> <tr> <td>clearButtonIcon</td> <td><code>data-clear-button-icon</code></td> <td><span class='mif-cross'></span></td> <td>Icon for clear button</td> </tr> <tr> <td>calendarButtonIcon</td> <td><code>data-calendar-button-icon</code></td> <td><span class='mif-calendar'></span></td> <td>Icon for show calendar button</td> </tr> <tr> <td>clsPicker</td> <td><code>data-cls-picker</code></td> <td></td> <td>Additional class for calendarpicker</td> </tr> </tbody> </table> <h3 id="_calendarpicker_calendar">Calendar options</h3> <p> Calendar picker has several options, who effects to behavior of the picker calendar. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>yearsBefore</td> <td><code>data-years-before</code></td> <td>100</td> <td>Years before today</td> </tr> <tr> <td>yearsAfter</td> <td><code>data-years-after</code></td> <td>100</td> <td>Years after today</td> </tr> <tr> <td>weekStart</td> <td><code>data-week-start</code></td> <td>0</td> <td>Start month from sunday or monday (0 - sunday, 1 - monday)</td> </tr> <tr> <td>outside</td> <td><code>data-outside</code></td> <td>true</td> <td>Show dates outside from month (prev or next month dates)</td> </tr> <tr> <td>ripple</td> <td><code>data-ripple</code></td> <td>false</td> <td>Add ripple effect to click</td> </tr> <tr> <td>rippleColor</td> <td><code>data-ripple-color</code></td> <td>#cccccc</td> <td>Ripple color</td> </tr> <tr> <td>exclude</td> <td><code>data-exclude</code></td> <td>null</td> <td>Dates can be excluded from selection</td> </tr> <tr> <td>special</td> <td><code>data-special</code></td> <td>null</td> <td>Dates, who can be selected</td> </tr> <tr> <td>minDate</td> <td><code>data-min-date</code></td> <td>null</td> <td>Min date</td> </tr> <tr> <td>maxDate</td> <td><code>data-max-date</code></td> <td>null</td> <td>Max date</td> </tr> <tr> <td>showHeader</td> <td><code>data-show-header</code></td> <td>true</td> <td>Show or hide calendar header</td> </tr> <tr> <td>clsToday</td> <td><code>data-cls-today</code></td> <td></td> <td>Additional class for today</td> </tr> <tr> <td>clsSelected</td> <td><code>data-cls-selected</code></td> <td></td> <td>Additional class for selected</td> </tr> <tr> <td>clsExclude</td> <td><code>data-cls-exclude</code></td> <td></td> <td>Additional class for excluded</td> </tr> <tr> <td>clsCalendar</td> <td><code>data-cls-calendar</code></td> <td></td> <td>Additional class calendar</td> </tr> <tr> <td>clsCalendarHeader</td> <td><code>data-cls-calendar-header</code></td> <td></td> <td>Additional class for calendar header</td> </tr> <tr> <td>clsCalendarContent</td> <td><code>data-cls-calendar-content</code></td> <td></td> <td>Additional class for calendar content</td> </tr> <tr> <td>clsCalendarMonths</td> <td><code>data-cls-calendar-months</code></td> <td></td> <td>Additional class for calendar months</td> </tr> <tr> <td>clsCalendarYears</td> <td><code>data-cls-calendar-years</code></td> <td></td> <td>Additional class for calendar years</td> </tr> </tbody> </table>  <h3 id="_calendarpicker_events">Events</h3> <p> When <code>picker</code> 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 <a href="events.html">this page</a>. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onDayClick(sel, day, el)</code></td> <td><code>data-on-day-click</code></td> <td>Metro.noop</td> <td>Callback for day click</td> </tr> <tr> <td><code>onCalendarShow(el, cal)</code></td> <td><code>data-on-calendar-show</code></td> <td>Metro.noop</td> <td>Callback for calendar was showed</td> </tr> <tr> <td><code>onCalendarHide(el, cal)</code></td> <td><code>data-on-calendar-hide</code></td> <td>Metro.noop</td> <td>Callback for calendar was hiding</td> </tr> <tr> <td><code>onChange(val, date, el)</code></td> <td><code>data-on-change</code></td> <td>Metro.noop</td> <td>Callback for picker value was changed</td> </tr> <tr> <td><code>onMonthChange(...)</code></td> <td><code>data-on-month-change</code></td> <td>Metro.noop</td> <td>Callback for picker month value was changed</td> </tr> <tr> <td><code>onYearChange(...)</code></td> <td><code>data-on-year-change</code></td> <td>Metro.noop</td> <td>Callback for picker year value was changed</td> </tr> <tr> <td><code>onCalendarPickerCreate(el)</code></td> <td><code>data-on-calendar-picker-create</code></td> <td>Metro.noop</td> <td>Callback fired when picker is created</td> </tr> </tbody> </table> <p> Select date in first picker and see change values in second picker </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <input type="text" data-role="calendarpicker" id="dp2" data-on-change="$('#dp1').attr('value', (arguments[1]))"> </div> <div class="cell-md-6"> <input type="text" data-role="calendarpicker" id="dp1" data-format="%d %b %Y"> </div> </div> </div> <pre><code> <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"> </code></pre> <h3 id="_calendarpicker_methods">Methods</h3> <p> You can use picker method <code>val()</code> to set or get picker value in javascript. Also you can set or get picker value with using <code>value</code> attribute. </p> <div class="example"> <input type="text" data-role="calendarpicker" value="1972/12/21" data-size="280" id="calendarpicker_val_test" data-format="%d %B %Y" class=""> <br /> <button class="button" onclick="$('#calendarpicker_val_test').data('calendarpicker').val('1972/12/21')">Reset</button> <button class="button" onclick="$('#calendarpicker_val_test').data('calendarpicker').val('2017/10/25')">Set 2017/10/25</button> <button class="button" onclick="alert($('#calendarpicker_val_test').data('calendarpicker').val())">Get date</button> </div> <pre><code> var cal = $(element).data("calendarpicker"); console.log(cal.val()); cal.val("1972/12/21"); </code></pre> <h3 id="_calendarpicker_observe">Observe</h3> <p> You can change attributes <code>value</code>, <code>disabled</code> <code>data-locale</code> at runtime and picker will be updated. </p> <div class="example"> <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"> </div> <pre><code class="html"> <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"> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>