JarCastingDescription:
This is a materialize clockpicker designed as an addition to http://materializecss.com/
Most source codes are taken from https://github.com/weareoutman/clockpicker
Install:
bower
bower install materialize-clockpicker --save
npm
npm i materialize-clockpicker --save
Options:
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:
Developing:
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).