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

user_3389866 0
Viewed 2226

I'm using DateTime Picker and I want to load a only Time picker.

I initialize my input field like this and works good. This let me pick only times 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 initialize this input with a time preselected, JS error occurs:

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

But if I put the input value like this 2017-12-24 13:00, the input time picker have that full value. That works good, but I want that the first value could be only the time, not full datetime.

Here is jsfiddle with a value preloaded. I want that this value could be 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
});
smalot-datetimepicker datetimepicker jquery javascript
3 Answers

Let's do a little trick. First we'll hide the input field. Then we'll devide the datetime value by space character to get only the time and set this as the input value. After that we will show the input field.

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>

user_76639720

And few years later I had a similar problem, and solved it with data attribute like this.

Lets take all the code posted in the question (second part, where you added value).

I added few data attributes to the input, data-date and data-inputvalue and have left the actual value empty.

    <input type="text" id="hour_from" name="hour_from" class="form-control" data-date="2017-12-24 13:00" data-inputvalue="13:00" value="" />

Now let's init the date picker just like in posted question, and add three rows below.

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

//taking data attr and storing it to value
var inputvalue = $('#hour_from').data('inputvalue');
$('#hour_from').val(inputvalue);

//informing datepicker the value changed (will work without this)
$('#datetimepicker_hour1').datetimepicker('update');

Here is the whole example in a working fiddle.

Hope this helps someone ;D

user_124215200

Set the value in the inputfield after datetimepicker has been initialized, then everything works.

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);
user_18578180
Related