Clock-style Time Picker In Pure JavaScript – Grudus Timepicker

Preview:

Description:

The Grudus Timepicker JavaScript library lets you create a Material Design time picker where the users are able to pick a time from an interactive clock interface.

How to use it:

Install it with NPM:

npm install --save grudus-timepicker

Load the main stylesheet ‘index.css’ and JavaScript ‘grudus-timepicker.es5.js’ in the html document.

<link href="src/styles/index.css" rel="stylesheet">
<script src="grudus-timepicker.es5.js"></script>

Show the time picker with default settings.

Timepicker.showPicker()

Customize the time picker with the following options. Override the default values as shown below and then pass them as an object to the ‘showPicker’ function.

{
  onSubmit: () => {},
  onClose: () => document.body.removeChild(document.getElementById(clockId)),
  headerBackground: "#1976D2",
  headerColor: "#c7d6e1",
  headerSelected: "#ffffff",
  wrapperBackground: "#f0fff0",
  footerBackground: "#f0fff0",
  submitColor: "#1976D2",
  cancelColor: "#1976D2",
  clockBackground: "#CFD8DC",
  clockItemColor: "#212121",
  clockItemInnerColor: "#212121",
  handColor: "#1976D2"
}