CODEWITHSUNDEEP
htmlformscakephpcakephp-2.x
Alamin Dawan
Alamin Dawan

Reputation: 119

How to create a HTML5 time input using the CakePHP form helper?

I faced cakephp time format problem. I am tired, this problem. When i try 'type' => 'time' then it change like my first screen short. But i want to need like second screen short. 

echo $this->Form->input('callback_time', array('label' => false, 'class' => 'callentry_time_formate readonly','data-live-search' => 'true','type' => 'time', 'value' => (!empty($this->request->data['CallEntry']['callback_time'])) ? $this->request->data['CallEntry']['callback_time'] : $callback_time));

Screen Short: 1 enter image description here

I want to need like under this picture. How can i solved it? Screen Short: 2 enter image description here

Screen Short: 3 when i go inspect element in browser and change type='time' then it work well like my Screen Short: 3 if i change cakephp helper input 'type' => 'time' then it look like screen short: 1. My required Screen Short:3. But it's working only inspect element enter image description here

Upvotes: 0

Views: 1864

Answers (2)

ndm
ndm

Reputation: 60503

The type option of FormHelper::input() doesn't necessarily translate directly to the HTML type attribute, but rather to the according FormHelper widget/element, and in case of time, this is multiple inputs for the individual time value components.

Use FormHelper::text()

If you need a single <input> element with the type attribute set, then you'll have to create the element directly via FormHelper::text(), where type will map to the HTML attribute, ie

$this->Form->text('callback_time', array(
    'type' => 'time',
    // ...
));

Of course you'll loose the magic that FormHelper::input() provides, ie error messages, wrappers, etc, you'll have to handle that on your own then.

See also

Use your own (extended) form helper

Another option would be to create your own, extend FormHelper, and either implement your own type, or override FormHelper::_getInput() or FormHelper::dateTime(), to make the built-in time type use the elements that you need. Here's an example doing the former:

app/View/Helper/MyFormHelper.php

App::uses('FormHelper', 'View/Helper');

class MyFormHelper extends FormHelper
{
    public function customTime($fieldName, $options = array())
    {
        $options =
            $this->_initInputField($fieldName, $options) + array('type' => 'time');

        return $this->Html->useTag(
            'input',
            $options['name'],
            array_diff_key($options, array('name' => null))
        );
    }
}

That's basically the same as above (see FormHelper::__call(), which is being invoked for FormHelper::text()), ie it creates a simple <input> element with the type attribute set, but keeps the magic that FormHelper::input() provides.

controller

public $helpers = array(
    'MyForm',
    // ...
);

.ctp view template

$this->MyForm->input('callback_time', array(
    'type' => 'customTime',
    // ...
));

See also

Upvotes: 4

Alimon Karim
Alimon Karim

Reputation: 4469

Try to use jquery-timepicker to create a time picker.

http://jonthornton.github.io/jquery-timepicker/

Upvotes: 0

Related Questions