Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzns/dzdatetimepicker
Functional, Extensible & Simple DateTime picker without any dependencies.
https://github.com/dzns/dzdatetimepicker
css es6 html javascript picker
Last synced: 26 days ago
JSON representation
Functional, Extensible & Simple DateTime picker without any dependencies.
- Host: GitHub
- URL: https://github.com/dzns/dzdatetimepicker
- Owner: DZNS
- License: mit
- Created: 2016-04-27T07:22:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-09T04:11:18.000Z (about 4 years ago)
- Last Synced: 2023-12-26T20:01:22.992Z (12 months ago)
- Topics: css, es6, html, javascript, picker
- Language: JavaScript
- Homepage:
- Size: 237 KB
- Stars: 10
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DZDateTimePicker
Functional, Extensible & Simple Date and Time picker without any dependencies.
DZDateTimePicker also automatically adds support for:
```html
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.
### Demos
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)
### Setup
Via NPM
```sh
npm install --save dzdatetimepicker
```
```html
```
### Date Picker Usage
Simply,
```html
```
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:
```html
Trigger
```
The few important things to note are:
- when `dzdatetimepicker-dsit.js` runs, it automatically finds elements with the class `date-trigger` and hooks on to them. No futher configuration is required.
- You can set additional, *optional* dataset items like `date-max` and `date-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.
### Timer Picker Usage
Simply,
```html
```
You can optionally initiate the time picker by wiring up a *trigger* element like so:
```html
Time Trigger
```
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:
```json
{
"string" : "14:26",
"hours" : 14,
"minutes" : 26
}
```
### Range Picker Usage
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:
```html
Start
End
```
You can then initialise the range picker as follows:
```js
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.
### Notes
- Both the datepicker and timepicker automatically idenity `` elements. They hook on to the `focus` and `blur` events so the user can use the pickers to set the values directly.
- If the pickers detect an `` element, the pickers will update the `value` attribute when the user updates their selection.
- When not using an `` element, you can optionally set the attribute `data-date-val=""` and it'll be updated similarly.
### Keyboard Navigation
#### Date picker
- `Tab`, `→` to move to the next date
- `Shift + Tab`, `←` to move to the previous date
- `Space` or `Enter` to confirm input
- `Escape` to dismiss the datepicker
- `Home` to go to the first date in the month
- `End` to go to the last date in the month
- `Page Up` to go to the previous month
- `Page Down` to go to the next month
#### Time picker
- `Tab` to move to the next control
- `Shift + Tab` to move to the previous control
- `Enter` to confirm input
- `Space` to confirm control input
### License
DZDateTimePicker is licensed under the MIT License. Please refer to the LICENSE file for more information.
### Author
Nikhil Nigade (Dezine Zync Studios)