Bootstrap datetimepicker gives same date everytime

Question

I have a bootstrap datetimepicker. Looks like there is an issue (Or maybe I'm not doing something right). I get the same date/time even though I modify my datepicker.

I'm using this plugin:

bootstrap-datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/

This is my datepicker code:

initializeDatePickers : function(){
var $datetimepicker = $(this.el).find('#datetimepicker');
$datetimepicker.datetimepicker({
    minDate: new Date(),
    defaultDate: new Date(),
});
},


<!-- HTML code -->
    <div class="form-group">
        <label for="datetimepicker">Start From</label>
        <div class="input-group date" id="datetimepicker">
            <input type="text" name="startFrom" class="form-control" required data-error="select date and time" />
        </div>
    </div>

I get the data using the following code:

var data = $('#scheduleForm').serializeArray();
var schedule = {'startFrom': this.fetchData(data, 'startFrom')};

Problem:

When I select bootstrap datepicker for the first time it prints out the defaultTime. Let's say I make a change, it STILL prints the old time. Am I missing something?

Answer 1

I can't figure out the problem of your code. Your js is not enough.

But I made an example. It seems works.

$(function() {
  var $datetimepicker = $('#datetimepicker');
  $datetimepicker.datetimepicker({
    minDate: new Date(),
    defaultDate: new Date()
  });
  $datetimepicker.on('dp.change', function() {
    console.log($(this).data("DateTimePicker").date());
    //var data = $('#scheduleForm').serializeArray();
    //console.log(data);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<form id='test-form'>
  <div class="form-group">
    <label for="datetimepicker">Start From</label>
    <div class="input-group date">
      <input id="datetimepicker" type="text" name="startFrom" class="form-control" required data-error="select date and time" />
    </div>
  </div>
</form>