CODEWITHSUNDEEP
phpcakephpcakephp-3.0bootstrap-datetimepicker
Raul Garcia Sanchez
Raul Garcia Sanchez

Reputation: 19

how can i use bootstrap datetimepicker in my cakephp 3.4 project

I have this code in my 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() ?>

And I want the fechanac field shows up with datetimepicker js and css like the sample page...

Upvotes: 1

Views: 1945

Answers (3)

Dariusz Majchrzak
Dariusz Majchrzak

Reputation: 1237

I think You can use this example:

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

And then init datetimepicker:

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

Upvotes: 0

CoolLife
CoolLife

Reputation: 1479

first include all libreries:

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

Now include in your code the example:

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

this should work.

Upvotes: 1

KaffineAddict
KaffineAddict

Reputation: 446

I assume you are using http://tarruda.github.io/bootstrap-datetimepicker/ if that is correct then the example is applicable otherwise you will need to adjust. You will most likely need to adjust anyways but the key is to utilize the options array to pass through things like the data-format etc. You will need to have the bootstrap twitter css and js loaded.

Your goal is to get the following

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

To get this you will need to specify the classes and other options of the input.

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

Upvotes: 0

Related Questions