如何使用CakePHP表单助手创建HTML5时间输入？

Question

我遇到了cakephp时间格式问题。我很累，这个问题。当我尝试键入＆＃39; =＆GT; ＆＃39;时间＆＃39;然后它改变就像我的第一个屏幕短。但我想要像第二屏短。

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

屏幕短片：1

我想在这张照片下需要。我怎么解决它？ 屏幕短片：2

屏幕短片：3 当我在浏览器中检查元素并更改type =＆＃39; time＆＃39;然后它就像我的Screen Short：3 如果我更改cakephp帮助者输入＆＃39;键入＆＃39; =＆GT; ＆＃39;时间＆＃39;然后它看起来像屏幕短：1。我所需的屏幕短：3。但它只是检查元素

Answer 1

type的{​​{1}}选项不一定直接转换为HTML FormHelper::input()属性，而是转换为相应的type小部件/元素，如果是FormHelper，这是各个时间值组件的多个输入。

使用time

如果您需要设置FormHelper::text()属性的单个<input>元素，那么您必须直接通过type创建元素，其中FormHelper::text()将映射到HTML属性，即

type

当然你会失去$this->Form->text('callback_time', array( 'type' => 'time', // ... )); 提供的魔力，即错误信息，包装等，你必须自己处理它。

另见

• 的 Cookbook > Views > Helpers > FormHelper > Creating form elements
• 的 Cookbook > Views > Helpers > FormHelper > Creating form elements > Options
• 的 Cookbook > Views > Helpers > FormHelper > Displaying and checking errors

使用您自己的（扩展）表单助手

另一种选择是创建自己的，扩展FormHelper::input()，并实现自己的类型，或覆盖FormHelper或FormHelper::_getInput()，以制作内置FormHelper::dateTime() } type使用您需要的元素。这是做前者的一个例子：

应用/视图/助手/ MyFormHelper.php

time

这基本上与上面相同（请参阅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)) ); } } ，正在为FormHelper::__call()调用），即它创建了一个带有FormHelper::text()属性集的简单<input>元素，但保留type提供的魔力。

<强>控制器

FormHelper::input()

.ctp查看模板

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

另见

• 的 Cookbook > Views > Helpers > Creating Helpers
• 的 Cookbook > Views > Helpers > Creating Helpers > Using your Helper

Answer 2

尝试使用jquery-timepicker创建时间选择器。

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