我如何在我的 cakephp 3.4 项目中使用 bootstrap datetimepicker答案

【问题标题】：how can i use bootstrap datetimepicker in my cakephp 3.4 project我如何在我的 cakephp 3.4 项目中使用 bootstrap datetimepicker
【发布时间】：2017-06-27 15:16:35
【问题描述】：

我的 huespedes/add.ctp 中有这段代码：

<div class="form" >
<?= $this->Form->create($huespede) ?>
<fieldset>
    <legend><?= __('Añadir Huésped') ?></legend>

    <?php

    echo $this->Form->control('nombre',array('type'=>'text','class' => 'form-control'));
        echo $this->Form->control('apellidos',array('type'=>'text','class' => 'form-control'));
        echo $this->Form->control('pasaporte', array ('label'=>'Pasaporte o Carnet de Identidad', 'class' => 'form-control','id' => 'carnet'));
        ?>
        <br>
        <?php
        echo $this->Form->control('fechanac', ['label'=>'Fecha de Nacimiento   .', 'empty' => true]);
        echo $this->Form->control('paise_id', ['label'=>'País', 'options' => $paises, 'empty' => 'Seleccione el País', 'class' => 'form-control']);
        echo $this->Form->control('observaciones', array ('class' => 'form-control'));
        echo $this->Form->hidden('habitacione_id', ['label'=>'Habitación', 'options' => $habitaciones, 'empty' => true, 'class' => 'form-control']);
        echo $this->Form->control('categoria_id', ['label'=>'Categorias', 'options' => $categorias, 'empty' => true, 'class' => 'form-control']);
    ?>
</fieldset>
<br>
<?= $this->Form->button(__('Aceptar')) ?>
<?= $this->Form->end() ?>

我希望fechanac 字段与示例页面一样显示 datetimepicker js 和 css...

【问题讨论】：

标签： php cakephp cakephp-3.0 bootstrap-datetimepicker

【解决方案1】：

首先包含all libreries:

<?= $this->Html->css('bootstrap.min.css') ?>
<?= $this->Html->script('bootstrap.min.js') ?>

现在在您的代码中包含example：

echo $this->Form->control('fechanac', ['label'=>'Fecha de Nacimiento   .', 'id' => 'datetimepicker1', 'empty' => true]);
 <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>

这应该可以。

【讨论】：

【解决方案2】：

我假设您使用的是http://tarruda.github.io/bootstrap-datetimepicker/，如果正确，则该示例适用，否则您需要进行调整。无论如何，您很可能需要进行调整，但关键是利用选项数组来传递数据格式等内容。您需要加载引导 twitter css 和 js。

你的目标是得到以下

<div class="well">
  <div id="datetimepicker1" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker1').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

为此，您需要指定输入的类和其他选项。

<div class="well">
  <div id="datetime-picker-div" class="input-append date">
    echo $this->Form->control('fechanac', ['label'=>'Fecha de Nacimiento   .', 'empty' => true, 'data-format' => 'dd/MM/yyyy hh:mm:ss', 'type' => 'text']);
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker1').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

【讨论】：

【解决方案3】：

我认为你可以使用这个例子：

<?= $this->Form->create($entity) ?>

<?= $this->Form->input('datetime_field' , [
    'type' => 'text',
    'class' => 'picker',
    'value' => $entity->datetime_field ? $entity->datetime_field->i18nFormat('y-MM-dd HH:mm:ss') : ''
]) ?>

<?= $this->Form->end(); ?>

然后初始化 datetimepicker：

<script type="text/javascript">
;+function() {
    $('.picker').datetimepicker({
        format : 'YYYY-MM-DD HH:mm:ss'
    })
}();
</script>

【讨论】：