Author: | q448x |
---|---|
Views Total: | 267 views |
Official Page: | Go to website |
Last Update: | January 24, 2021 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript library to create a customizable, beautiful, mobile-friendly time picker component inspired by Google Material design system.
Features:
- Desktop & Mobile layouts.
- Allows to switch between desktop and mobile layouts with a toggle button.
- 3 built-in themes: Light (default), Crane Straight, and Crane Radius.
How to use it:
1. Install the timepicker-ui package with NPM.
# Yarn $ yarn add timepicker-ui # NPM $ npm i timepicker-ui --save
2. Import the timepicker-ui into your project.
// ES import TimepickerUI from 'timepicker-ui'; // browser <script src="dist/timepicker-ui.umd.js"></script>
3. Load the required Material Icons in the document.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
4. Insert a time input into the document.
<div class="example"> <input class="timepicker-ui-input" value="12:00 AM" /> </div>
5. Initialize the time picker.
const element = document.querySelector('.example'); const myTimePicker = new TimepickerUI(element);
6. Activate the time picker on the time input. That’s it.
myTimePicker.create();
7. Enable the Mobile layout.
const myTimePicker = new TimepickerUI(element,{ mobile: true });
8. Display a switch button inside the time picker that allows the user to switch between Desktop and Mobile layouts.
const myTimePicker = new TimepickerUI(element,{ enableSwitchIcon: true });
9. Set the theme you prefer.
const myTimePicker = new TimepickerUI(element,{ theme: 'crane-radius' // or 'crane-straight' });
10. Sometimes you might need to toggle the time picker with a custom trigger element like a button.
<div class="open-by-button"> <input type="text" class="timepicker-ui-input" value="12:00 PM" /> <button data-open="open-by-button" > Open </button> </div>
const openByButton = document.querySelector(".open-by-button"); const openByButtonInit = new TimepickerUI(openByButton); openByButtonInit.create();
11. All configurations.
amLabel: 'AM', appendModalSelector: '', backdrop: true, cancelLabel: 'CANCEL', enableScrollbar: true, enableSwitchIcon: false, enterTimeLabel: 'Enter Time', focusInputAfterCloseModal: false, hourMobileLabel: 'Hour', iconTemplate: '<i class="material-icons timepicker-ui-keyboard-icon">keyboard</i>', iconTemplateMobile: '<i class="material-icons timepicker-ui-keyboard-icon">schedule</i>', incrementHours: 1, incrementMinutes: 1, inputTemplate: '', minuteMobileLabel: 'Minute', mobile: false, okLabel: 'OK', pmLabel: 'PM', selectTimeLabel: 'Select Time', switchToMinutesAfterSelectHour: false, theme: 'basic',
12. Open & close the time picker programmatically.
myTimePicker.open(); myTimePicker.close();
13. Event handlers.
myTimePicker.addEventListener('show', (event) => console.log(event.detail)); myTimePicker.addEventListener('cancel', (event) => console.log(event.detail)); myTimePicker.addEventListener('accept', (event) => console.log(event.detail)); myTimePicker.addEventListener('update', (event) => console.log(event.detail)); myTimePicker.addEventListener('selectminutemode', (event) => console.log(event.detail)); myTimePicker.addEventListener('selecthourmode', (event) => console.log(event.detail)); myTimePicker.addEventListener('selectamtypemode', (event) => console.log(event.detail)); myTimePicker.addEventListener('selectamtypemode', (event) => console.log(event.detail));
Changelog:
v2.1.1 (01/24/2021)
- fix problem with transition and add new version 2.1.1
v2.0.2 (01/21/2021)
- fix problem with close event
v2.0.1 (01/18/2021)
- Everything was rewritten to TypeScript.
- Fixed problems with move events on mobile.
- Fixed problem with keyboard icon click on mobile.
11/05/2020
- v1.2.0