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.