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'
});

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 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