Today date or already selected date on previous input not able to select

Question

I am using Daterangepicker for our application.

Creating multitrip date picker component (3 input fields)

1. TripOne - Select date (Ex: 19th Feb)
2. TripTwo - Have to start from 'TripOne' selected date.
3. TripThree - Have to start from 'TripTwo' selected date.

Above things are working fine.

But, below issue not working on this plugin.

1. TripOne - Select Today date (Not working)
2. TripTwo - If Feb 20th selected on TripOne, i cant able to select same Feb 20th on TripTwo.
3. TripThree - Similar to TripTwo.

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(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today,
    "maxDate": maxLimitDate,
    "locale": {
        format: 'DD MMM YYYY'
    }
    },function(start) {
      $("#tripOne").val(start.format('DD MMM YYYY'));
      $('#tripOne').parent().parent().removeClass('has-error');
      var returnTripStartDate = new Date(Date.parse(start));
      $('input[name="tripTwo"]').daterangepicker({
        "autoApply": true,
        "autoUpdateInput": false,
        "singleDatePicker": true,
        "minDate": returnTripStartDate,
        "maxDate": maxLimitDate,
        "locale": {
            format: 'DD MMM YYYY'
        }
      },function(end) {
            $("#tripTwo").val(end.format('DD MMM YYYY'));
            $('#tripTwo').parent().parent().removeClass('has-error');
            var returnTripStartDate2 = new Date(Date.parse(start));
            $('input[name="tripThree"]').daterangepicker({
            "autoApply": true,
            "autoUpdateInput": false,
            "singleDatePicker": true,
            "minDate": returnTripStartDate2,
            "maxDate": maxLimitDate,
            "locale": {
                format: 'DD MMM YYYY'
            }
            },function(end) {
                $("#tripThree").val(end.format('DD MMM YYYY'));
                $('#tripThree').parent().parent().removeClass('has-error');
            });
            $(function() {
                $('.calendar.right').show();
            });
      });
      $(function() {
        $('.calendar.right').show();
      });
      $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripThree"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
    });
    $(function() {
        $('.calendar.right').show();
    });

Fiddle page view

Answer 1

The problem is not the date picker itself... you is the way you are using it. In your code EVERY TIME that you select something out of trip #1 datepicker it tries to affect the second which tries to affect the third :(

The right approach: init all 3 datepickers on your document ready event.. but wait: how will you change each datepicker configurations according to your logic?

Well it is as simple as: Change option dynamically in JQuery UI DatePicker fails

Make a long story short - each time you change a value in a datepicker, change the next picker configurations:

function(start) 
{
    $("#tripOne").val(start.format('DD MMM YYYY'));

    // .....

    $('input[name="tripTwo"]').datepicker("destroy");

    $("#dteEnd").datepicker({
     // new options here - with your desired value
    });

    // ......

Answer 2

If you are using date picker in the below format:

$('yourInput').daterangepicker(
      (start, end, label) => {
         //business logic
      }

Then change it to the below format:

$('yourInput').daterangepicker().on('apply.daterangepicker',function(ev,pickerr) {

}