CODEWITHSUNDEEP
phphtmlformscakephp
harryg
harryg

Reputation: 24077

Getting CakePHP HtmlHelper to generate a "date" input

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?

Upvotes: 2

Views: 11301

Answers (6)

JimRod
JimRod

Reputation: 1

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');

Upvotes: 0

Lars Ebert-Harlaar
Lars Ebert-Harlaar

Reputation: 3537

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.

Upvotes: 3

Christian
Christian

Reputation: 325

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.

Upvotes: -1

Salim Hamidi
Salim Hamidi

Reputation: 21381

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

Upvotes: 0

Rodrigo Mendes
Rodrigo Mendes

Reputation: 11

Try this:

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

Upvotes: 1

harryg
harryg

Reputation: 24077

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.

Upvotes: 4

Related Questions