Błąd JS podczas inicjowania parametru datetimicker programu startowego, jeśli wartość wejściowa zawiera tylko czas

Question

Używam DateTime Picker i chcę załadować tylko próbnik czasu.

Inicjuję moje pole wprowadzania w ten sposób i działa dobrze. To pozwoli mi wybrać tylko razy 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 
}); 

Jeśli chcę zainicjować to wejście z czasem wybranym występuje błąd JS:

"Uncaught TypeError: Cannot read property 'getTime' of undefined"

Ale jeśli mogę umieścić wartość wejściową jak ten 2017-12-24 13:00 , selektor czasu wejścia ma tę pełną wartość. Działa to dobrze, ale chcę, aby pierwszą wartością był tylko czas, a nie pełna data.

Oto jsfiddle z wstępnie załadowaną wartością. Chcę, że wartość ta może być 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 
}); 

Answer 1

Zróbmy małą sztuczkę. Najpierw ukryjemy pole wejściowe. Następnie podzielimy wartość daty i czasu za pomocą znaku spacji, aby uzyskać tylko czas i ustawić go jako wartość wejściową. Następnie pokażemy pole wprowadzania.

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://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script> 
 
<link rel="stylesheet" href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.min.css" /> 
 
<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>