A materialize clockpicker, dem

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 Screenshots:

npm i gulp bower -g npm install bower install gulp watch Getting started Basic setup

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

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

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"> </div> 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"> </div> Add the Javascript trigger with the corresponding options

<script> $('#timepicker').pickatime({ autoclose: false, twelvehour: false, default: '14:20:00' }); </script> Get time selected using after done function

<script> $('#timepicker').pickatime({ autoclose: false, twelvehour: false, afterDone: function(Element, Time) { console.log(Element, Time); } }); </script>

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