comment puis-je utiliser datetimepicker bootstrap dans mon CakePHP 3.4 projet

Question

J'ai ce code dans mes 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() ?> 

Et je veux le champ fechanac montre avec DateTimePicker js et css comme la page exemple ...

Answer 1

Je suppose que vous utilisez http://tarruda.github.io/bootstrap-datetimepicker/ si cela est correct alors l'exemple est applicable sinon vous devrez ajuster. Vous aurez probablement besoin d'ajuster de toute façon, mais la clé est d'utiliser le tableau d'options pour passer à travers des choses comme le format de données, etc. Vous aurez besoin d'avoir le bootstrap twitter css et js chargé.

Votre but est d'obtenir les éléments suivants

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

Pour obtenir cela, vous devrez spécifier les classes et d'autres options de l'entrée.

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

Answer 2

premier comprennent all libreries:

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

incluent maintenant dans votre code le example:

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

cela devrait fonctionner.

Answer 3

Je pense que vous pouvez utiliser cet exemple:

<?= $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(); ?> 

Et init datetimepicker:

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