CODEWITHSUNDEEP
jquerytwitter-bootstrapeonasdan-datetimepicker
Dawood Awan
Dawood Awan

Reputation: 7328

Eonasdan Bootstrap Linked DateTime Pickers not working as expected

I have a situation where the User can only select a date range of 7 days.

So if the start date is 01-02-2016 00:00 Maximum end date should be 06-02-2016 23:59

Then if the user selects 08-02-2016 00:00 the the Maximum end date should be 14-02-2016 23:59

So for this I am using the Date Time Picker: http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

The Problem I am having is when I perform the first condition it works fine - but when I select the second condition it gives an error in the console.

enter image description here

Here is the code I have:

$(function() {

  $('#HistoryStartDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: true
  }).on('dp.change', function(e) {
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date);
    var m = moment(new Date(e.date));
    m.add(6, 'days');
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m);
  });

  $('#HistoryEndDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: true
  });


});

Here is the JSFiddle: https://jsfiddle.net/xsmsym3m/

EDIT:

I found a workaround which does not seem like a good solution, because it will fail in some scenarios, but I'm posting it here (https://jsfiddle.net/v18gfo4s/):

$(function() {

  $('#HistoryStartDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: true
  }).on('dp.change', function(e) {

   // Adding two years so I can set the Min Date
    var tt = moment(new Date(e.date));
    tt.add(2, 'years');
    $('#HistoryEndDate').data('DateTimePicker').maxDate(tt);

      // Set the Min date
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date);

    //Set the Max Date
    var m = moment(new Date(e.date));
    m.add(5, 'days');
    m.add(23, 'hours');
    m.add(59, 'minutes');
    m.add(59, 'seconds');
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m);

      // Set End Date
    var temp = moment(new Date(e.date));
    temp.add(23, 'hours');
    temp.add(59, 'minutes');
    temp.add(59, 'seconds');

    $('#HistoryEndDate').data('DateTimePicker').date(temp);
  });

  $('#HistoryEndDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: false
  });


});

Upvotes: 0

Views: 860

Answers (1)

VincenzoC
VincenzoC

Reputation: 31482

You can try checking new minDate value before updating the second picker.

$(function() {

    $('#HistoryStartDate').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        allowInputToggle: true,
        useCurrent: true
    }).on('dp.change', function(e) {
      var minNew = e.date;
      var maxNew = e.date.clone().add(6, 'days');
      var pickEnd = $('#HistoryEndDate');
      var minOld = pickEnd.data('DateTimePicker').minDate();
      var maxOld = pickEnd.data('DateTimePicker').maxDate();
    
      if( minOld && minOld.isAfter( maxNew )){
          pickEnd.data('DateTimePicker').minDate(minNew);
          pickEnd.data('DateTimePicker').maxDate(maxNew);
      } else {
          pickEnd.data('DateTimePicker').maxDate(maxNew);
          pickEnd.data('DateTimePicker').minDate(minNew);
      }
    });

    $('#HistoryEndDate').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        allowInputToggle: true,
        useCurrent: true
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<div class="form-horizontal">
  <div class="col-md-4">
    <div class="form-group">
      Start Date
      <div class="col-md-9">
        <div class='input-group date' id="HistoryStartDate">
          <input type='text' class="form-control" name="HistoryStartDate" value="05/03/2016 00:00" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      End Date
      <div class="col-md-9">
        <div class='input-group date' id="HistoryEndDate">
          <input type='text' class="form-control" name="HistoryEndDate" value="05/03/2016 23:59" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions