Getting CakePHP HtmlHelper to generate a "date" input

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?

Solution 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.

Solution 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.

Solution 3

Try this:

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