Clock-style Time Picker In Pure JavaScript – Grudus Timepicker

Category: Date & Time , Javascript | August 16, 2017
Views Total:2,312 views
Official Page:Go to website
Last Update:August 16, 2017


Clock-style Time Picker In Pure JavaScript – Grudus Timepicker


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.


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"


You Might Be Interested In:

Leave a Reply