Press "Enter" to skip to content

DateTimePicker based on Material Design | timepicker-ui

timepicker-UI is an easy library with a time picker and completely written with pure javascript and this library is based on Google Material Design.

material design time picker, material date picker android, date range picker material ui, datepicker js, date picker ui, material design number picker

How to make use of 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 undertaking.

// ES
import TimepickerUI from 'timepicker-ui';

// browser
<script src="dist/timepicker-ui.umd.js"></script>

3. Load the required Material Icons within the doc.

<link href="" rel="stylesheet" />

4. Insert a time input into the doc.

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


7. Enable the Mobile format.

const myTimePicker = new TimepickerUI(element,{
      mobile: true

8. Display a change button contained in the time picker that enables the consumer to modify between Desktop and Mobile layouts.

const myTimePicker = new TimepickerUI(element,{
      enableSwitchIcon: true

9. Set the theme you like.

const myTimePicker = new TimepickerUI(element,{
      theme: 'crane-radius' // or 'crane-straight'

10. Sometimes you may have to toggle the time picker with a customized set off component 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));

Google Material Inspired Time Picker Component, TimePicker UI Plugin/Github


See Demo And Download

Official Website(q448x): Click Here

This superior jQuery/javascript plugin is developed by q448x. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *