Date picker

Use a date picker to let a user pick a single date value.


The date picker gives you a standardized way to let users pick a date value. To create picker you must add role with attribute data-role="datepicker" to input element.

                    <input data-role="datepicker">

Picker parts

The picker consists of three parts: month, day and year. With attributes data-month, data-day and data-year you can on/off each part. For disabled parts, the picker will get value from current system date.

                    <input data-role="datepicker" data-day="false" data-year="false">
                    <input data-role="datepicker" data-day="false">
                    <input data-role="datepicker" data-year="false">


You can set locale for picker with attribute data-locale.

                    <input data-role="datepicker" data-locale="uk-UA">

You can change locale at runtime. Metro 4 monitors the data-locale attribute change and redraws the component when the attribute value changes.

Min & max years

You can set min and max years for picker. To set min and max years use attributes data-min-year and data-max-year.

                    <input data-role="datepicker"  data-min-year="2014" data-max-year="2020">

Picker value

By default picker get current date from system for init value. But you can set init date with attribute data-value. Also you can change attribute data-value at runtime to change real value for component. To get value you can read input value attribute or use special component methods. To format output value for input, you can use attribute data-format. More about date format you can read from this article.

Important! Value for attribute data-value must be a valid javascript datetime string. Read about valid date format this and this.

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

You can change format at runtime. Metro 4 monitors the data-format attribute change and change element value when the attribute changes.


When picker works, it generated a number of events. You can use callbacks to these events to interact with it.

Events Data-* Desc
onSet(val, elem_val, elem, picker) data-on-set Fired when value sets to picker
onOpen(val, elem, picker) data-on-open Fired when picker is open
onClose(val, elem, picker) data-on-close Fired when picker is close
onScroll(target, list, picker) data-on-scroll Fired when picker is scroll
onTimePickerCreate(elem, picker) data-on-time-picker-create Fired when picker was created


                    <input data-role="datepicker" data-on-set="console.log(arguments)">
                    <input data-role="datepicker" data-on-set="">


                    var myLib = {
                        date: {
                            set: function(val){


To interact with component you can use picker methods.

Method Desc
open() Use this method to open picker scroller
close() Use this method to close picker scroller
val() Use this method to get picker value as string
val(t) Use this method to set picker value from string
date() Use this method to get picker value as datetime object
date(t) Use this method to set picker value from datetime object


You can use attribute data-distance to set scroller size.

                    <input data-role="datepicker" data-distance="1">
                    <input data-role="datepicker" data-distance="2">
                    <input data-role="datepicker" data-distance="3">

Also you can use attributes data-cls-picker, data-cls-part, data-cls-month, data-cls-day, data-cls-year to set additional styles to picker. Values for these attributes must be valid css class.