CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3bootstrap-4datetimepicker
Noman Shaikh
Noman Shaikh

Reputation: 170

Bootstrap datetime picker not updating second time

I want to set a start date picker which is called dropoff_date_picker from another which is pickup_time_picker. when I select a date from pickup_time_picker first-time dropoff_date_picker start date updated and works fine but if the user changes the date from pickup_time_picker than dropoff_time_picker will not be updated and it will not work second time below is my code snippet. I don't know where I am doing mistake. I have already used 'change', dp.change','change.dp' and 'changeDate' and nothing is working.

$("#pickup_time_picker").datetimepicker({
  format: "dd MM yyyy - hh:ii",
  autoclose: true,
  todayBtn: true,
  startDate: today,
  minuteStep: 10,
  pickerPosition: "bottom-left"
}).on('change.dp', function(e) {

  var fromDate = $('#pickup_time_feild').val().split(" ");
  var fromTime = $('#pickup_time_feild').val().split(" - ");
  var fromMinutes = fromTime[1].split(":");
  var dat = new Date(fromDate[0] + ' ' + fromDate[1] + ' ' + fromDate[2] + '');
  var present = new Date(fromDate[2], dat.getMonth(), fromDate[0], fromMinutes[0], fromMinutes[1]);
  enddate = new Date(present.getFullYear(), present.getMonth() - 1, present.getDate(), present.getHours(),
    present.getMinutes(), 0, 0);

  alert(present);

  $('#dropoff_time_picker').datetimepicker({
    format: "dd MM yyyy - hh:ii",
    autoclose: true,
    todayBtn: true,
    startDate: present,
    minuteStep: 10,
    pickerPosition: "bottom-left"
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date_wrap">
  <input type="date" id="pickup_time_picker" />
  <input type="date" id="dropoff_time_picker" />
</div>

Upvotes: 2

Views: 1253

Answers (1)

Noman Shaikh
Noman Shaikh

Reputation: 170

I just added following line in the end and it works. 

$('#dropoff_time_picker').datetimepicker('setStartDate',present);

Following is the complete code.

$("#pickup_time_picker").datetimepicker({
   format: "dd MM yyyy - hh:ii",
   autoclose: true,
   todayBtn: true,
   startDate: today,
   minuteStep: 10,
   pickerPosition: "bottom-left"
}).on('change.dp', function(e) {

   var fromDate = $('#pickup_time_feild').val().split(" ");
   var fromTime = $('#pickup_time_feild').val().split(" - ");
   var fromMinutes = fromTime[1].split(":");
   var dat = new Date(fromDate[0] + ' ' + fromDate[1] + ' ' + fromDate[2] + '');
   var present = new Date(fromDate[2], dat.getMonth(), fromDate[0], fromMinutes[0], 
   fromMinutes[1]);
   enddate = new Date(present.getFullYear(), present.getMonth() - 1, 
   present.getDate(), present.getHours(),
   present.getMinutes(), 0, 0);
   $('#dropoff_time_picker').datetimepicker({
   format: "dd MM yyyy - hh:ii",
   autoclose: true,
   todayBtn: true,
   startDate: present,
   minuteStep: 10,
   pickerPosition: "bottom-left"
  });
 $('#dropoff_time_picker').datetimepicker('setStartDate',present);
});

Upvotes: 1

Related Questions