A materialize clockpicker, demo on
Branch: master
Clone or download
yhching Bugfix
* Screenshot too freaking large
Latest commit aba2752 Apr 30, 2018



This is a materialize clockpicker designed as an addition to http://materializecss.com/

Most source codes are taken from https://github.com/weareoutman/clockpicker



bower install materialize-clockpicker --save


npm i materialize-clockpicker --save


Here are some options and their defaults:

default: '',            // default time, 'now' or '13:14' e.g.
fromnow: 0,             // set default time to * milliseconds from now
donetext: 'Done',       // done button text
cleartext: 'Clear',     // clear button text
autoclose: false,       // auto close when minute is selected
ampmclickable: false,   // set am/pm button on itself
darktheme: false,       // set to dark theme
twelvehour: true,       // change to 12 hour AM/PM clock from 24 hour
vibrate: true,          // vibrate the device when dragging clock hand
container: '',          // default will append clock next to input
submit:''               // submit in 24 hour format


Image of Materialize Clock Light Image of Materialize Clock Dark


npm i gulp bower -g
npm install
bower install
gulp watch

Getting started

Basic setup

  1. Make sure you have materialize css (including their JavaScript files): http://materializecss.com/

  2. Install this package via npm or bower. Alternatively you can also download the source files and add them to your project manually.

  3. Create an input field in your html code like the following:

<div class="input-field col s12">
    <label for="timepicker">Time</label>
    <input id="timepicker" class="timepicker" type="time">
  1. Add default value to the input
<div class="input-field col s12">
    <label for="timepicker">Time</label>
    <input id="timepicker" data-default="14:20:00" class="timepicker" type="time">
  1. Add the Javascript trigger with the corresponding options
    autoclose: false,
    twelvehour: false,
    default: '14:20:00'
  1. Get time selected using after done function
    autoclose: false,
    twelvehour: false,
    afterDone: function(Element, Time) {
      console.log(Element, Time);

You can trigger the clock either by ID's or classes (useful if you have several clocks on one page).