CakePHP Date Time Picker

Date Picker is one of the most important features in web-based application to enhance the user experience especially when input date and time. Technically, CakePHP support native HTML5 date picker that can be call using 'type' => 'Date' but the picker need to be click at caret symbol then the calendar will popup. To enhance the user friendly and experience, I recommended to use JQuery date picker. 

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

2. The date time 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 date time picker. Those code should be load at the top of the coding page.

<?php
	echo $this->Html->css('jquery.datetimepicker');
	echo $this->Html->script('jquery.datetimepicker.full.js');
?>

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

<div class="form-group">
<?php echo $this->Form->input('correspondence_date', array(
  'class' => 'form-control datepicker-here', 
  'label' => 'Correspondence Date',
  'id' => 'correspondence_date',
  'type' => 'Text',
  'data-language' => 'en',
  'data-date-format' => 'yyyy-mm-dd',
  'value' => date('Y-m-d'),
  'empty'=>'empty'
  ));
?>	
<script>
$('#correspondence_date').datetimepicker({
	lang:'en',
	timepicker:false,
	format:'Y-m-d',
	formatDate:'Y/m/d',
	minDate:'-1970/01/01', // yesterday is minimum date
	//maxDate:'+1970/01/02' // and tommorow is maximum date calendar
});
</script>
</div>

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