cakephp 3.x 日期时间容器模板答案

【问题标题】：cakephp 3.x datetime container templatecakephp 3.x 日期时间容器模板
【发布时间】：2015-07-30 17:21:52
【问题描述】：

我正在使用 Cakephp 3 和 Bootstrap 构建一个简单的办公任务站点。我正在尝试替换 cakephp 用于日期的常规 3 输入日期。使用单个输入并通过 Javascript 将其替换为一些花哨的日期选择器。因此，我试图通过更改 cake 用于构建表单输入的模板来做到这一点。文档说：

除了这些模板之外，input() 方法将尝试为每个输入容器使用不同的模板。例如，在创建日期时间输入时，将使用 datetimeContainer（如果存在）。如果缺少该容器，则将使用 inputContainer 模板。

但我正在使用它，它没有任何改变。 HTML 输出仍然使用常规的 inputContainer。这是我的代码：

'Templates'=>[
            'defaultForm' => [
                'label' => '<label class="col col-md-2 control-label" {{attrs}}>{{text}}</label>',
                'input' => '<div class="col col-md-10"><input class="form-control" type="{{type}}" name="{{name}}" {{attrs}} /></div>',
                'select' => '<div class="col col-md-10"><select class="form-control" name="{{name}}"{{attrs}}>{{content}}</select></div>',
                'inputContainer' => '<div class="form-group">{{content}}</div>',
                'datetimeContainer' => '<div class="form-group"><div class="input-group date col col-md-10">{{content}}</div></div>',
                'dateWidget' => '<input type="text" class="form-control" name="{{name}}" {{attrs}} /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>'
            ]
        ]

我错过了什么吗？

【问题讨论】：

标签： php forms twitter-bootstrap cakephp cakephp-3.0

【解决方案1】：

好的，我刚刚发现了我的错误。我使用的是“datetimeContainer”，但数据库中的字段是 DATE，而不是 DATETIME。所以 cakephp 在构建表单 HTML 时会查找“dateContainer”。我改变了：

'datetimeContainer' => '<div class="form-group"><div class="input-group date col col-md-10">{{content}}</div></div>',

到

'dateContainer' => '<div class="form-group"><div class="input-group date col col-md-10">{{content}}</div></div>',

现在它工作正常。希望这对任何人都有帮助。

【讨论】：

这是 formHelper 的日期格式输入最有用的答案。非常感谢老兄。 =)

【解决方案2】：

我用css按照代码解决了：

.date > select {
    display: inline-block;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    height: 34px;
    padding: 6px 12px;
    width: 33.3%;
    font-size: 14px;
    line-height: 1.42857143;
}
.datetime > .date > select {
    display: inline-block;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    height: 34px;
    padding: 6px 12px;
    width: 20%;
    font-size: 14px;
    line-height: 1.42857143;
}

ss 跟随代码：

【讨论】：