Author: | pglejzer |
---|---|
Views Total: | 2,352 views |
Official Page: | Go to website |
Last Update: | November 18, 2022 |
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', 'm3' });
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.
// custom text for AM label amLabel: 'AM', // enable animation animation: true, // append to this element appendModalSelector: '', // enable backdrop backdrop: true, // custom text for Cancel label cancelLabel: 'CANCEL', // or '24h' clockType: '12h', // true = update picker with toLocaleTimeString() and input with value based on your location // object = { time: new Date(), updateInput: true, locales: "en-US", preventClockType: false } currentTime: undefined, // boolean | object, Set current time to the input and timepicker. // set delay to clickable elements like button "OK", "CANCEL" etc. delayHandler: 300, // allows to edit hour/minutes editable: false, // enable scrollbar enableScrollbar: false, // enable switch icon enableSwitchIcon: false, // OBJECT, 3 keys: hours, minutes and interval disabledTime: undefined, // set focus to the input after you close the modal focusInputAfterCloseModal: false, // turn off/on focus trap to the picker focusTrap: true, // custom text for hour label on mobile version hourMobileLabel: 'Hour', // increment hour by 1, 2, 3 hour incrementHours: 1, // increment minutes by 1, 5, 10, 15 minutes incrementMinutes: 1, // icon template iconTemplate: '<i class="material-icons timepicker-ui-keyboard-icon">keyboard</i>', // icon template on mobile version iconTemplateMobile: '<i class="material-icons timepicker-ui-keyboard-icon">schedule</i>', // custom text for minute label on mobile version minuteMobileLabel: 'Minute', // enable mobile version mobile: false, // custom text for hour label on mobile version mobileTimeLabel: 'Enter Time', // custom text for OK label okLabel: 'OK', // custom text for PM label pmLabel: 'PM', // revent default events preventDefault: true, // custom text for time label on desktop version timeLabel: 'Select Time', // switch to minutes after selecting an hour switchToMinutesAfterSelectHour: false, // crane-straight, crane-radius theme: 'basic',
12. More API methods
// open the timepicker myTimePicker.open(callback); // close the timepicker // if the boolean is set to true the input will be updating with the current value on picker myTimePicker.close(boolean, callback); // destroy myTimePicker.destroy(callback); // update myTimePicker.update(options, callback);
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)); myTimePicker.addEventListener('geterror', (event) => console.log(event.detail));
Changelog:
v2.6.1 (11/18/2021)
- Added new value to the property theme called m3. Theme m3 based on the new Material Design v3.
v2.6.0 (11/17/2021)
- changed invoke of close() method. These method has to invoke with double parentheses close()(). The first parentheses doesn’t have any parameters, the second has the same what had in the previous method.
- added delayHandler prop to avoid delay on buttons
- fixed problem with 0NaN error when using touch input.
v2.5.0 (05/07/2021)
- fixed problem with focusTrap with React about eval error
v2.4.4 (04/02/2021)
- fixed problem with focusTrap with React about eval error
v2.4.3 (04/02/2021)
- fixed problem with minutes option in currentTime
- added focusTrap to turn off/on focus traping on picker. The default value is set to true
- added possibility to open picker by click enter if input is focused
v2.4.2 (03/30/2021)
- fixed problem with currentTime about displaying the wrong hour in the picker
- fixed problem with editable option when switch during desktop/mobile options
- added OptionTypes to allows to import types from package
v2.4.1 (03/26/2021)
- added new currentTime option
- fixed landscape on the mobile view
v2.4.0 (03/23/2021)
- added new update method
- added new destroy method
- added new option disabledTime that allows to set to timepicker disabled time
- updated a methods open, close with new parameters and callbacks
v2.3.0 (03/06/2021)
- bugfixes
- changed option name from
selectLabelTime
tolabelTime
- added UMD version
- added new options
mobileTimeLabel
to change time label on mobile version
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
it doesn’t work in a simple vanilla website, i tried to use timepicker-ui.js without success. It seems that the plugin is not really vanilla javascript because it can only work with obese framework like nodes etc.
I added the UMD version since 2.3.0 version and this package also is available in the cdnjs https://cdnjs.com/libraries/timepicker-ui which you can use this library without installation.