Google Material Inspired Time Picker Component – timepicker-ui

Category: Date & Time , Javascript | November 5, 2020
Views Total:158 views
Official Page:Go to website
Last Update:November 5, 2020


Google Material Inspired Time Picker Component – timepicker-ui


A vanilla JavaScript library to create a customizable, beautiful, mobile-friendly time picker component inspired by Google Material design system.


  • 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 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="" rel="stylesheet" />

4. Insert a time input into the document.

<div class="example">
  <input class="timepicker-ui-input" value="12:00 AM" />

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.


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">
    value="12:00 PM"
const openByButton = document.querySelector(".open-by-button");
const openByButtonInit = new TimepickerUI(openByButton);

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

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



  • v1.2.0

You Might Be Interested In:

Leave a Reply