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.

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:

11/05/2020

• v1.2.0