DateTimePicker based on Material Design | timepicker-ui

How to make use of 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 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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

4. Insert a time input into the doc.

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

myTimePicker.create();

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

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

See Demo And Download