Author: | pglejzer |
---|---|
Views Total: | 420 views |
Official Page: | Go to website |
Last Update: | May 7, 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' });
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. // 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.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.