Home Date & Time Material Design Clock-style Timepicker In Pure Vanilla JS

Material Design Clock-style Timepicker In Pure Vanilla JS

Date & Time webcodeflow · October 23, 2022 · 0 Comment

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.

Timepicker.showPicker()

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