CODEWITHSUNDEEP
javascriptjquerydatepickerdaterangepicker
TDG
TDG

Reputation: 1302

DateRangePicker - minDate of 2nd input to start with 1st input selected value

I am using DateRangePicker plugin to select the date.

The picker is working fine - but our required behaviour is that mindate of MultiCityTripTwo should be the selected value of MultiCityTripOne.

Can anyone suggest a solution?

HTML:

<input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" />

<input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" />

Js:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('input[name="MulticityTripOne"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today,
    "maxDate": maxLimitDate,
    "opens": "left",
    "locale": {
        format: 'DD MMM YYYY'
    }
}, function (start, end) {
    $("#multiCityTripInputOne").val(start.format('DD MMM YYYY'));
    $('#multiCityTripInputOne').parent().parent().removeClass('has-error');
    console.log($("#multiCityTripInputOne").val());
});

$('input[name="MulticityTripTwo"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today, /* Mindate have to start with MultiCityTripOne val */
    "maxDate": maxLimitDate,
    "opens": "left",
    "locale": {
        format: 'DD MMM YYYY'
    }
}, function (start, end) {
    $("#multiCityTripInputTwo").val(start.format('DD MMM YYYY'));
    $('#multiCityTripInputTwo').parent().parent().removeClass('has-error');
});

Upvotes: 3

Views: 11347

Answers (1)

Robin Mackenzie
Robin Mackenzie

Reputation: 19289

Example code below changes yours by setting the second picker in the callback of the first. This code gets the new minimum date for the second picker:

var aMinDate = new Date(Date.parse(start));

Where start is in the callback.

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var minDateForSecondPicker;

$('input[name="MulticityTripOne"]').daterangepicker({
  "autoApply": true,
  "autoUpdateInput": false,
  "singleDatePicker": true,
  "minDate": today,
  "maxDate": maxLimitDate,
  "opens": "left",
  "locale": {
    format: 'DD MMM YYYY'
  }
}, function(start, end) {
  $("#multiCityTripInputOne").val(start.format('DD MMM YYYY'));
  $('#multiCityTripInputOne').parent().parent().removeClass('has-error');
  console.log($("#multiCityTripInputOne").val());

  var aMinDate = new Date(Date.parse(start));
  
  $('input[name="MulticityTripTwo"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": aMinDate,
    "maxDate": maxLimitDate,
    "opens": "left",
    "locale": {
      format: 'DD MMM YYYY'
    }
  }, function(start, end) {
    $("#multiCityTripInputTwo").val(start.format('DD MMM YYYY'));
    $('#multiCityTripInputTwo').parent().parent().removeClass('has-error');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input class="form-control input-lg" id="multiCityTripInputOne" name="MulticityTripOne" />

<input class="form-control input-lg" id="multiCityTripInputTwo" name="MulticityTripTwo" />

Upvotes: 8

Related Questions