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="Use a time picker to let a user pick a single time value. 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>Date 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="#">Date picker</a></li> <li class="toc-entry"><a href="#_datepicker_about">About</a></li> <li class="toc-entry"><a href="#_datepicker_parts">Picker parts</a></li> <li class="toc-entry"><a href="#_datepicker_locale">Locale</a></li> <li class="toc-entry"><a href="#_datepicker_min-max-years">Min & max years</a></li> <li class="toc-entry"><a href="#_datepicker_value">Value</a></li> <li class="toc-entry"><a href="#_datepicker_events">Events</a></li> <li class="toc-entry"><a href="#_datepicker_methods">Methods</a></li> <li class="toc-entry"><a href="#_datepicker_custom">Customize</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>Date picker</h1> <p class="text-leader"> Use a date picker to let a user pick a single date value. </p>  <h3 id="_datepicker_about">About</h3> <p> The date picker gives you a standardized way to let users pick a date value. To create picker you must add role with attribute <code>data-role="datepicker"</code> to <code>input</code> element. </p> <div class="example"> <div class="row"> <div class="cell-md-4"></div> <div class="cell-md-4"> <input data-role="datepicker"> </div> <div class="cell-md-4"></div> </div> </div> <pre><code class="html"> <input data-role="datepicker"> </code></pre> <h3 id="_datepicker_parts">Picker parts</h3> <p> The picker consists of three parts: <code>month</code>, <code>day</code> and <code>year</code>. With attributes <code>data-month</code>, <code>data-day</code> and <code>data-year</code> you can on/off each part. For disabled parts, the picker will get value from current system date. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <input data-role="datepicker" data-day="false" data-year="false"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-day="false"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-year="false"> </div> </div> </div> <pre><code class="html"> <input data-role="datepicker" data-day="false" data-year="false"> <input data-role="datepicker" data-day="false"> <input data-role="datepicker" data-year="false"> </code></pre> <h3 id="_datepicker_locale">Locale</h3> <p> You can set <code>locale</code> for picker with attribute data-locale. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <input data-role="datepicker" data-locale="uk-UA"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-locale="de-DE"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-locale="hu-HU"> </div> </div> </div> <pre><code class="html"> <input data-role="datepicker" data-locale="uk-UA"> </code></pre> <h3 id="_datepicker_min-max-years">Min & max years</h3> <p> You can set min and max years for picker. To set min and max years use attributes <code>data-min-year</code> and <code>data-max-year</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-min-year="2014" data-max-year="2020"> </div> <div class="cell-md-4"> </div> </div> </div> <pre><code class="html"> <input data-role="datepicker" data-min-year="2014" data-max-year="2020"> </code></pre> <h3 id="_datepicker_value">Picker value</h3> <p> By default picker get current date from system for init value. But you can set init date with attribute <code>data-value</code>. Also you can change attribute <code>data-value</code> at runtime to change real value for component. To get value you can read <code>input</code> <code>value</code> attribute or use special <a href="#_datepicker_methods">component methods</a>. To format output value for input, you can use attribute <code>data-format</code>. More about date format you can read from <a href="dateformat.html">this article</a>. </p> <p class="remark warning"> Important! Value for attribute <code>data-value</code> must be a valid javascript datetime string. Read about valid date format <a href="http://tools.ietf.org/html/rfc2822#page-14">this</a> and <a href="https://www.w3.org/TR/NOTE-datetime">this</a>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <input data-role="datepicker" data-value="1972-12-21"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-value="Mon, 25 Dec 1995"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-value="2018-02"> </div> </div> </div> <pre><code class="html"> <input data-role="datepicker" data-value="1972-12-21"> <input data-role="datepicker" data-value="Mon, 25 Dec 1995"> <input data-role="datepicker" data-value="2018-02"> </code></pre>  <h3 id="_datepicker_events">Events</h3> <p> When picker works, it generated a number of events. You can use callbacks to these events to interact with it. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Events</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onSet(val, elem_val, elem, picker)</code></td> <td><code>data-on-set</code></td> <td>Fired when value sets to picker</td> </tr> <tr> <td><code>onOpen(val, elem, picker)</code></td> <td><code>data-on-open</code></td> <td>Fired when picker is open</td> </tr> <tr> <td><code>onClose(val, elem, picker)</code></td> <td><code>data-on-close</code></td> <td>Fired when picker is close</td> </tr> <tr> <td><code>onScroll(target, list, picker)</code></td> <td><code>data-on-scroll</code></td> <td>Fired when picker is scroll</td> </tr> <tr> <td><code>onTimePickerCreate(elem, picker)</code></td> <td><code>data-on-time-picker-create</code></td> <td>Fired when picker was created</td> </tr> </tbody> </table> <pre><code class="html"> html: <input data-role="datepicker" data-on-set="console.log(arguments)"> <input data-role="datepicker" data-on-set="myLib.date.set"> javascript: var myLib = { date: { set: function(val){ console.log(val); } } } </code></pre> <h3 id="_datepicker_methods">Methods</h3> <p> To interact with component you can use picker methods. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Method</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>open()</code></td> <td>Use this method to open picker scroller</td> </tr> <tr> <td><code>close()</code></td> <td>Use this method to close picker scroller</td> </tr> <tr> <td><code>val()</code></td> <td>Use this method to get picker value as string</td> </tr> <tr> <td><code>val(t)</code></td> <td>Use this method to set picker value from string</td> </tr> <tr> <td><code>date()</code></td> <td>Use this method to get picker value as datetime object</td> </tr> <tr> <td><code>date(t)</code></td> <td>Use this method to set picker value from datetime object</td> </tr> </tbody> </table> <h3 id="_datepicker_custom">Customize</h3> <p> You can use attribute <code>data-distance</code> to set scroller size. </p> <div class="example"> <div class="row"> <div class="cell-md-4"><input data-role="datepicker" data-distance="1"></div> <div class="cell-md-4"><input data-role="datepicker" data-distance="2"></div> <div class="cell-md-4"><input data-role="datepicker" data-distance="3"></div> </div> </div> <pre><code class="html"> <input data-role="datepicker" data-distance="1"> <input data-role="datepicker" data-distance="2"> <input data-role="datepicker" data-distance="3"> </code></pre> <p> Also you can use attributes <code>data-cls-picker</code>, <code>data-cls-part</code>, <code>data-cls-month</code>, <code>data-cls-day</code>, <code>data-cls-year</code> to set additional styles to picker. Values for these attributes must be <strong>valid css class</strong>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> </div> <div class="cell-md-4"> <input data-role="datepicker" data-cls-picker="drop-shadow" data-cls-month="bg-red fg-white" data-cls-day="bg-green fg-white" data-cls-year="bg-cyan fg-white" > </div> <div class="cell-md-4"> </div> </div> </div> </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>