Estoy usando Selector de fecha y hora y quiero cargar solo un selector de hora.

Inicializo mi campo de entrada así y funciona bien. Esto me permite elegir solo las horas jsfiddle:

<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" />
</div>
$('#datetimepicker_hour1').datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1
});

Si quiero inicializar esta entrada con un tiempo preseleccionado, se produce un error JS:

"Error de tipo no detectado: no se puede leer la propiedad 'getTime' de undefined"

Pero si pongo el valor de entrada así 2017-12-24 13:00, el selector de tiempo de entrada tiene ese valor completo. Eso funciona bien, pero quiero que el primer valor sea solo la hora, no la fecha y hora completa.

Aquí está jsfiddle con un valor precargado. Quiero que este valor sea 13:00:

<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" />
</div>
$('#datetimepicker_hour1').datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1
});
6
fcastillo 12 nov. 2017 a las 14:27

2 respuestas

La mejor respuesta

Hagamos un pequeño truco. Primero ocultaremos el campo de entrada. Luego dividiremos el valor de fecha y hora por carácter de espacio para obtener solo la hora y lo configuraremos como el valor de entrada. Después de eso, mostraremos el campo de entrada.

var $hour_from = $("#hour_from");
$hour_from.datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1,
  timeFormat: 'hh:mm',

});
$hour_from.val($hour_from.val().split(' ')[1])
$hour_from.show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" value="2017-12-24 13:00" data-date-format="hh:ii" style="display:none;" />
</div>
2
Vignesh Raja 11 jun. 2018 a las 18:39

Establezca el valor en el campo de entrada después de que se haya inicializado datetimepicker, entonces todo funciona.

var hour_from = "13:00";

<div class="input-group date" id="datetimepicker_hour1">
  <input type="text" id="hour_from" name="hour_from" class="form-control" value="" />
</div>

$('#datetimepicker_hour1').datetimepicker({
  language: 'es',
  format: 'hh:ii',
  minuteStep: 60,
  autoclose: true,
  minView: 1,
  maxView: 1,
  startView: 1
});

$('#hour_from').val(hour_from);
-1
puntable 4 ene. 2020 a las 21:29