Functional, Extensible & Simple Date and Time picker without any dependencies.
DZDateTimePicker also automatically adds support for:
input[type="date"]
input[type="time"]
input[type="datetime-local"]
if they are not supported natively. You don't have to do anything extra. The library will handle the setup for you. You simply have to query the .value
of your original input elements and you're all set.
The related demos are in the demo
folder of this repo.
On a related note:
- All source files are in the
src
directory. - All distribution files are in the
dist
directory (which you should use for production sites)
Via NPM
npm install --save dzdatetimepicker
<script src="dzdatetimepicker-dist.js"></script>
<!-- The stylesheet. You can include your own instead -->
<link rel="stylesheet" href="dzdatetimepicker.css" />
Simply,
<input type="datetime-local" name="epoch-start" />
DZDateTimePicker will allow native browser implementations to take over if they exist. If they don't, the library will do it's own wiring for you.
You can optionally initiate the date picker by wiring up a trigger element like so:
<button
class="date-trigger"
data-date-max="2016-05-09"
data-date-min="2016-01-01"
data-onset="didSetDate"
>Trigger</button>
The few important things to note are:
- when
dzdatetimepicker-dsit.js
runs, it automatically finds elements with the classdate-trigger
and hooks on to them. No futher configuration is required. - You can set additional, optional dataset items like
date-max
anddate-min
to control the selectable items within a range. Both are optional, and you can use only one if desired. - the last parameter,
onset
is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
Simply,
<input type="time" name="epoch-start" />
You can optionally initiate the time picker by wiring up a trigger element like so:
<div
role="button"
class="trigger timer-trigger"
data-onchange="didSetTime"
>Time Trigger</div>
When the script loads, it automatically hooks on to elements with the class timer-trigger
. No other configuration is necessary. Similar to the date picker, the last parameter, onchange
is required if you need a callback when the user selects a date. This is optional, however, your implementation will require it if you need to update the UI. The implementation for this is intentionally left out.
The callback, unlike the date picker, responds with an object in the following format:
{
"string" : "14:26",
"hours" : 14,
"minutes" : 26
}
To setup a range picker, include the rangepicker-dist.js
file along with the date-picker sources as mentioned above. Then you can can write simple markup as follows:
<div id="range-picker">
<div
role="button"
class="trigger range-start"
data-date-max="2017-05-09"
data-date-min="2016-01-01"
data-onset="didSetDate"
>Start</div>
<div
role="button"
class="trigger range-end"
data-date-max="2017-05-09"
data-date-min="2016-01-01"
data-onset="didSetDate"
>End</div>
</div>
You can then initialise the range picker as follows:
const myRangePicker = new RangePicker(document.getElementById("range-picker"))
The RangePicker
will then automatically handle all the setup for you and adjust the min-max ranges for the date picker based on the user's input.
- Both the datepicker and timepicker automatically idenity
<input>
elements. They hook on to thefocus
andblur
events so the user can use the pickers to set the values directly. - If the pickers detect an
<input>
element, the pickers will update thevalue
attribute when the user updates their selection. - When not using an
<input>
element, you can optionally set the attributedata-date-val=""
and it'll be updated similarly.
Tab
,โ
to move to the next dateShift + Tab
,โ
to move to the previous dateSpace
orEnter
to confirm inputEscape
to dismiss the datepickerHome
to go to the first date in the monthEnd
to go to the last date in the monthPage Up
to go to the previous monthPage Down
to go to the next month
Tab
to move to the next controlShift + Tab
to move to the previous controlEnter
to confirm inputSpace
to confirm control input
DZDateTimePicker is licensed under the MIT License. Please refer to the LICENSE file for more information.
Nikhil Nigade (Dezine Zync Studios)