Una vez definidos los INPUTS de fecha en el HTML , el problema viene cuando quieres usar el formulario en un celular o tablet, ya que cuando te situas sobre el campo se muestra el teclado virtual, lo que hace que se vea recontra feo y mal, felizmente despues de 20 minutos de leer la documentacion encontre el comando ignoreReadonly: true, es decir define el input text como readonly asi ya no se mostrara el KEYBOARD y tu puedes trabajar con la libreria feliz y contento, hasta la proxima =)

<div class=”col-sm-2″>Inicio</div>
<div class=”col-sm-4″>
<div class=’input-group date ‘ id=’datetimepicker3′>
<input type=’text’ readonly=”true” class=”form-control” id=”hora_inicio” />
<span class=”input-group-addon”>
<span class=”glyphicon glyphicon-time”></span>
</span>
</div>
</div>
<div class=”col-sm-2″> Final </div>
<div class=”col-sm-4″>
<div class=’input-group date ‘ id=’datetimepicker4′>
<input type=’text’ readonly class=”form-control” id=”espera_inicio” />
<span class=”input-group-addon”>
<span class=”glyphicon glyphicon-time”></span>
</span>
</div>
</div>

$(‘#datetimepicker4’).datetimepicker({

format: ‘LTS’,
format: ‘HH:mm:ss’,
ignoreReadonly: true

});

HTML:

<input type='text' class="form-control" placeholder="Fecha Inicio" readonly="true" />

JS:

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});