This is a materialize clockpicker designed as an addition to http://materializecss.com/
Original source codes are taken from https://github.com/chingyawhao/materialize-clockpicker
Most source codes are taken from https://github.com/weareoutman/clockpicker
##Install:
git clone https://github.com/DaedalusDev/materialize-clockpicker.git
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
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
dismissible: true, // dismissable
// Time restrictions
interval: false, // set a time interval in minute / if 60, skip minute picker
min: false, // set the min time. ex: [13, 30] for 13:30
max: false, // set the max time. ex: [18, 30] for 18:30
disable: false // disable time value. ex: [[8,30],[12],[14,0],[null,15]] for 8:30, 12:**, 14:30 and **:15
// Events:
init // After plugin init
beforeShow // Before Show picker
afterShow // After show picker
beforeHourSelect // Before hour select
afterHourSelect // After hour select
beforeDone // Before Done
afterDone // After done
invalidHour // on invalid hour picking
invalidMinute // on invalid minute picking
invalidTime // on invalid doneIf you want to change the global default fonctionnality from this plugin, you can access default settings using $.fn.pickatime.defaults. Example:
$.fn.pickatime.defaults.interval = 15; // single change
$.extend( true, $.fn.pickatime.defaults, { // Multiple change
"donetext": 'Ok',
"min": 'now'
});$('#myInput').pickatime({
donetext: 'Banzaï',
darktheme: true,
beforeShow: function(e, clockPicker) {
// do someting
}
});You can get the clockpicker instance :
$('#myInput').pickatime(); // Method 1
$('#myInput').data('clockpicker'); // Method 2Note : All event use namespace "clockpicker"
$('#myInput')
.on('beforeShow.invalidHour', function(e, clockPicker) {
// do someting
// You can get current error with clockPicker.error
});// Simply recall apply new options on isntance
$('#myInput')
.pickatime({
darktheme: false,
donetext: 'Oki doki',
});
// With set method
// Method 1 :
$('#myInput')
.pickatime('set','darktheme', true) // set individual change
.pickatime('set', { // multiple changes
donetext: 'Ok',
min: [8, 30]
});
// Method 2 :
$('#myInput')
.pickatime()
.set('darktheme',true) // set individual change
.set({ // multiple changes
donetext: 'Ok',
min: [8, 30]
});The plugin can handle various time format :
// Arrays formatted as [h,m].
clockpicker.set('min', [5,30]); // for 05:30
// Date objects.
clockpicker.set('max', new Date(2017,6,18,5,30)); // for 05:30
// Using formatted strings.
clockpicker.set('min', '05:30')); // for 05:30
clockpicker.set('min', '05:30PM')); // for 17:30
// Using integers as time relative to now.
clockpicker.set('max', -4) // now -4 hours
// Using `now` for “now”.
clockpicker.set('min', 'now') //
// Using `false` to remove.
clockpicker.set('max', false)
npm install
grunt monitor
-
Make sure you have materialize css (including their JavaScript files): http://materializecss.com/
-
Install this package via git.
-
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>
- Your can use html data attr to change some options
<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>
You can trigger the clock either by ID's or classes (useful if you have several clocks on one page).