Material Design Clock-style Timepicker In Pure Vanilla JS

Grudus Timepicker is a JavaScript library that allows you to create a Material Design time picker where users can choose a time from an interactive clock interface.

jquery time picker, timepicker, clockpicker 24 hour format, javascript time picker, clockpicker 12 hour format, bootstrap clockpicker 12 hour format

How to make use of it:

Install it with NPM:

npm install --save grudus-timepicker

1. Load the main stylesheet “index.css” and the javascript “grudus-timepicker.es5.js” into the html document.

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

2. Show time picker with default settings.


3. Customize the time picker with the following options.

  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"

clock-style time picker, Grudus Timepicker Plugin/Github

See Demo And Download

Official Website(grudus): Click Here

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