Google Material Inspired Time Picker Component – timepicker-ui

Category: Date & Time , Javascript | May 7, 2022
Author:pglejzer
Views Total:420 views
Official Page:Go to website
Last Update:May 7, 2022
License:MIT

Preview:

Google Material Inspired Time Picker Component – timepicker-ui

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

You Might Be Interested In:


2 thoughts on “Google Material Inspired Time Picker Component – timepicker-ui

  1. Xav Xander (@XavXander)

    it doesn’t work in a simple vanilla website, i tried to use timepicker-ui.js without success. It seems that the plugin is not really vanilla javascript because it can only work with obese framework like nodes etc.

    Reply

Leave a Reply