CakePHP Clock Picker

Input time is easier using clock picker as time selection mechanism. HTML5 support the input type time using 'type'='time' but the 'time' attribute is not supported in Safari and IE 12. To enhance the user experience in selecting time, i recommended to use clock picker as a medium to select time. The clock picker support all web-kit web browser and mobile view.

1. Download the jQuery Clock Picker (If you use iMVC Package, skip this step. It has been pre-configured and integrated with the package)

2. The clock picker CSS and JS should be properly place at respective folder at webroot-css & webroot-js (If you use iMVC Package, skip this step. It has been pre-configured and integrated with the package)

3. Insert the following code to call the CSS and JS to the page that you want to use clock picker. Those code should be load at the top of the coding page.

<?php
	echo $this->Html->css('clockpicker');
	echo $this->Html->css('standalone');
	echo $this->Html->script('clockpicker.js');
?>

4. Next, identify your input name for clock picker and the location of the clock picker should appear. EG: your input name is 'arrival_time', so the code should be as shown below:

<div class="form-group">
<?php echo $this->Form->input('arrival_time', array(
  'class' => 'form-control', 
  'label' => 'Arrival Time',
  'type'=>'Time',
  'id'=>'arrival_time'
));?>

<script>
var input = $('#arrival_time');
input.clockpicker({
    autoclose: true
});
</script>
</div>

5. Now, check your input name to ensure that you've correctly configure the clock picker. At line number 1, 6 and 10 must use same variable (input name) to ensure that the script are able to identify and call the JS function for clock picker. Refresh your page and the output of the clock picker will be shown as below: