StartDate in daterangepicker doesn't work in the second input

Question

When I try in first input to create startDate it work but I need startDate for second input, the result is not work. Here is my code

$('.date-picker').daterangepicker({
  singleDatePicker: true,
  minDate: moment().subtract(1, 'years'),
  maxDate: moment().subtract(1, 'days'),
  locale: {
        format: 'DD-MM-YYYY'
      }
  }, function(chosen_date) {
      $('.date-picker').val(chosen_date.format('DD-MM-YYYY'));
    })

  $('.date-picker-2').daterangepicker({
    minDate: departpicker,
    /*why is not working?*/
    startDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'),
    maxDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days')
})

Here is my full code Fiddle

I hope when I select 06-08-2018, the startDate in second input is 12-08-2018. like this picture

Answer 1

you have to change the start date of the second date-time picker.Currently it sets to the initial date, Hope this helps.

var drp = $('.date-picker-2').data('daterangepicker');
drp.setStartDate(moment(departpicker, 'DD-MM-YYYY').add(6, 'days'));

Answer 2

As a minDate for .date-picker-2 , you only provided the string outputted from the first datepicker... Instead of a date object.

Here is the change I made:

minDate: moment(departpicker, 'DD-MM-YYYY'),  //departpicker,
/*why is not working?*/

I also commented this additional attempt to set dates:

//var drp = $('.date-picker-2').data('daterangepicker');
//drp.setStartDate(departpicker);
//drp.setEndDate(departpicker);

It's working fine below:

 var autoupdate = false; function date1(){ $('.date-picker').daterangepicker({ singleDatePicker: true, showDropdowns: true, minDate: moment().subtract(1, 'years'), autoApply: true, disabledDays: 'today', maxDate: moment().subtract(1, 'days'), autoUpdateInput: autoupdate, locale: { format: 'DD-MM-YYYY' } }, function(chosen_date) { $('.date-picker').val(chosen_date.format('DD-MM-YYYY')); }); } date1(); $('.date-picker').on('apply.daterangepicker', function(ev, picker) { if ($('.date-picker').val().length == 0 ){ autoupdate = true; console.log('true'); date1(); } var departpicker = $('.date-picker').val(); $('.date-picker-2').daterangepicker({ minDate: moment(departpicker, 'DD-MM-YYYY'), //departpicker, /*why is not working?*/ startDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'), maxDate: moment(departpicker, 'DD-MM-YYYY').add(6, 'days'), singleDatePicker: true, showDropdowns: true, autoApply: true, locale: { format: 'DD-MM-YYYY' } }); //var drp = $('.date-picker-2').data('daterangepicker'); //drp.setStartDate(departpicker); //drp.setEndDate(departpicker); });

 <link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <input type="text" class="date-picker"> <input type="text" class="date-picker-2">