Geek Answers Handbook

JS error when initializing datetimepicker bootstrap if input value contains only time

I am using DateTime Picker and I want to download only Time picker.

I initialize my input field like this and it works fine. This allows me to select only 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
});

If I want to initialize this input with the selected time, a JS error occurs:

"Uncaught TypeError: Unable to read getTime property from undefined"

But if I put the input value as follows 2017-12-24 13:00, the input timing will have the full meaning. This works well, but I want the first value to be only time, not a full datetime.

jsfiddle , . , 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
1

. . datetime , . .

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>
Hide result
+2

More articles:


All Articles