CODEWITHSUNDEEP
jquerytwitter-bootstrapdatetimepicker
JazZ
JazZ

Reputation: 4579

BootStrap DateTimePicker on dp.change fires both pickers

I have two inputs for a start and an end date. On start 'dp.change' I'd like to set minDate of end date and on end 'dp.change' set maxDate of start date.

But the start event set both options when 'dp.change'. It set its maxDate so i can't select greater date than... now. I can't understand why.

Any help will be appreciated.

HTML

<div class="col-md-3">
  <div class="form-group">
    <label>{l s='From :' mod='everrent'}</label>
    <div class='input-group date' id='start_time'>
        <input type="text" class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
  </div>
</div>
<div class="col-md-3">
  <label>{l s='To :' mod='everrent'}</label>
  <div class="form-group">
    <div class='input-group date' id='end_time'>
        <input type="text" class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
  </div>
</div>

JS

$(document).ready(function(){
  /* Initialise DateTimePickers */
  $('#start_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5
  });
  $('#end_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5
  });
  /* Setting up DateTimePickers */
  $('#start_time').on('dp.change', function(e) {
    $('#start_time').data("DateTimePicker").minDate(new Date());
    $('#end_time').data("DateTimePicker").minDate(e.date);
  });
  $('#end_time').on('dp.change', function(ev) {
    $('#start_time').data("DateTimePicker").maxDate(ev.date);
  });
});

Upvotes: 2

Views: 3478

Answers (1)

nmbrphi
nmbrphi

Reputation: 681

I know it's a while that this question is open, but better late than never, right?

You found this error #1075 of the js library bootstrap-datetimepicker. Lucky for you the solution is quite simple, when you create the second datetimepicker object (#end_time), you have to set the attribute useCurrent to false like this:

/* Initialise DateTimePickers */
  $('#start_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5
  });
  $('#end_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5,
    useCurrent: false //<--- this change
  });
  /* Setting up DateTimePickers */
  $('#start_time').on('dp.change', function(e) {
    $('#start_time').data("DateTimePicker").minDate(new Date());
    $('#end_time').data("DateTimePicker").minDate(e.date);
  });
  $('#end_time').on('dp.change', function(ev) {
    $('#start_time').data("DateTimePicker").maxDate(ev.date);
  });

See this: JSFiddle

Upvotes: 2

Related Questions