Getting CakePHP HtmlHelper to generate a "date" input - php

Question

I've been making some basic CRUD pages for my cakePHP app using the HtmlHelper for the views. This is handy for building forms but for date inputs the helper by default generates 3 select boxes for the date which is quite cumbersome to use.
HTML5 introduces the input[type=date] and most browsers now incorporate some nice native interfaces to deal with it; e.g. Chrome produces a nice date-picker for date inputs.
I know it is possible to make the HtmlHelper just make the input a text box instead of the 3 dropdown by doing the following:
echo $this->Form->input('my_date', array('type' => 'text'));
But when I do
echo $this->Form->input('my_date', array('type' => 'date'));
it ignores the 2nd arguement and goes back to the 3 selects.
Is there a way to get the helper to make a date input?

Answer 1

It seem the HtmlHelper has not yet evolved to make use of the "date" input.
If you tell the helper to generate the date input as a text field, adding a jQuery one-liner can convert it to a date input.
So:
echo $this->Form->input('my_date', array('type' => 'text'));
to generate the field. Then:
$('#idOfMyDate').attr('type', 'date');
To change it to a date input.
If anyone has a better way I'd be keen to hear it.

Answer 2

The CakePHP FormHelper uses Widgets to render different input types. For "datetime" types, it uses the DateTimeWidget per default.
To get a regular input with the attribute type="date", you just have to tell CakePHP which widget to use.
In the View (usually App\AppView.php), you can configure the FormHelper:
<?php
namespace App\View;
use Cake\View\View;
class AppView extends View
{
public function initialize() {
$this->loadHelper('Form', [
'widgets' => [
'datetime' => ['Basic'],
],
]);
}
}
?>
The BasicWidget is the most basic widget which is used to render regular text inputs.
Then, in your view, you can just use 'type' => 'date' as expected:
echo $this->Form->input('my_date', array('type' => 'date'));
Or, since CakePHP already sets the type to "date" since the database column is a datetime field you can just leave it like this:
echo $this->Form->input('my_date');
The result is a regular text input with type="date".
For future readers: In the most recent version of CakePHP, you would use the method Form::control instead of Form::input. Everything else still applies.

Answer 3

Try this:
echo $this->Form->text('my_date',array('type' => 'date');

Answer 4

Like this it'll work as a charm
<div class="form-group">
<label for="Description"><?php echo __('Date'); ?></label>
<div class='input-group date' id='datetimepicker1'>
<?php echo $this->Form->input('scheduled_date', array('label'=> false, 'div' => false, 'class'=>'form-control', 'type' => 'text')); ?>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Some explanation:
'div' => false: it's necessary to desable the div rendered by input() FormHelper function
'label' => false: it's necessary to desable the label rendered by input() FormHelper function
Take a look at cake PHP form helper doc for more details

Answer 5

I solved this problem with jquery
PHP
<?= $this->Form->control('birth_date', ['value' => $birth_date->i18nFormat('yyyy-MM-dd'), 'type' => 'text']); ?>
JS
$('#birth-date').attr('type', 'date');

Answer 6

It's obvious that Cake's FormHelper is messing up with <input type "date">. Therefore I solved this problem the following way (in CakePHP 2.x)
Copy FormHelper.php from lib\Cake\View\Helper\
Paste it to app\View\Helper. Now Cake will use your Form Helper instead of its own.
Open the new FormHelper.php, go to protected function _getInput($args) {, search for case 'date': and change it from:
case 'date':
$options += array('value' => $selected);
return $this->dateTime($fieldName, $dateFormat, null, $options);
to:
case 'date':
return $this->{$type}($fieldName, $options);
Cake will now stop transforming <input type="date"> into select boxes.
Keep in mind that with every future release of Cake 2.x you will have to transfer possible changes in Cake's Form Helper into your own Form Helper manually.