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

Question

我遇到了 cakephp 时间格式问题。我累了，这个问题。当我尝试“类型”=>“时间”时，它会像我的第一个屏幕一样变短。但我想需要像第二个屏幕一样短。

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='time' 时，它就像我的 Screen Short: 3 如果我更改 cakephp 助手输入“类型”=>“时间”，那么它看起来像屏幕短：1。我需要的屏幕短：3。但它只适用于检查元素

Answer 1

FormHelper::input() 的 type 选项不一定直接转换为 HTML type 属性，而是转换为相应的 FormHelper 小部件/元素，如果是 time，这是多个输入对于各个时间价值成分。

使用FormHelper::text()

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

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

当然你会失去FormHelper::input() 提供的魔力，即错误消息、包装器等，然后你必须自己处理。

另见

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

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

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

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

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

控制器

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

.ctp 视图模板

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

另见

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

Answer 2

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

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