Date picker

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

About

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

Locale

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 UI 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 UI monitors the data-format attribute change and change element value when the attribute changes.

Events

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


                    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);
                            }
                        }
                    }

Methods

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

Customize

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.

Table of contents