Google Material Inspired Time Picker Component – timepicker-ui

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 to labelTime
• 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