How to select End date automatically after selecting startdate in Bootstrap daterangepicker

Question

$('#Startdate').daterangepicker({
    singledatepicker=true,
    locale:{Format : "dd-mm-yyyy"}
});

$('#Enddate').daterangepicker({
    singledatepicker=true,
    locale:{Format : "dd-mm-yyyy"}
});

In UserInterface I have two Text box @html.EditiorFor(m=>m.Startdate) and @html.EditiorFor(m=>m.Enddate).

How can we change when we select date from startdate and enddate automatically shown end date of that month ? I am also unable to show current textbox date in daterangepicker to highlight. any help will be appreciated...

Answer 1

    $('#Startdate').daterangepicker({
               singledatepicker=true,
               locale:{Format : "dd-mm-yyyy"},  
       onSelect: function(selectedDate) { 
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#Enddate").datepicker("setDate", date);
            $("#Enddate").datepicker("option", "minDate", selectedDate);
            $("#Enddate").datepicker("option", "maxDate", date); 
     }
    });

Answer 2

You can provide a callback function when you init daterangepicker. The callback gets the selected date as input and you can add 15 days using momentjs (one of components dependencies). Then you can use daterangepicker setStartDate and setEndDate methods to set the value on #Enddate.

Here a working sample:

$('#Startdate').daterangepicker({
  singleDatePicker: true,
  locale:{format : "DD-MM-YYYY"}
}, function(start, end, label){
  if( start ){
    var end = start.clone().endOf('month');
    $('#Enddate').data('daterangepicker').setStartDate(end.startOf('day'));
    $('#Enddate').data('daterangepicker').setEndDate(end.endOf('day'));
  }
});

$('#Enddate').daterangepicker({
  singleDatePicker: true,
  locale:{format : "DD-MM-YYYY"}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input id="Startdate">
<input id="Enddate">

Please note that you have to provide a valid object as parameter of daterangepicker function. Do not use singledatepicker=true, and pay attention to capitalization, the valid options for the daterangepicker are singleDatePicker: true (camel case) and format (lowercase).

Answer 3

 $('#StartDate').daterangepicker({
            singleDatePicker: true,
            locale: { format: "DD-MM-YYYY" }
        },
         function (start, end, label) {
             var selectedDate = start._d;
             var EndMonthDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
             EndMonthDate = EndMonthDate .getDate() + '/' + (EndMonthDate .getMonth() + 1) + '/' + EndMonthDate .getFullYear();
             $('#EndDate').daterangepicker({
                 singleDatePicker: true,
                 startDate: EndMonthDate 
             });
         });

Answer 4

$('#Startdate').daterangepicker({
               singledatepicker=true,
               locale:{Format : "dd-mm-yyyy"},  
       onSelect: function(selectedDate) { 
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#Enddate").datepicker("setDate", date);
            $("#Enddate").datepicker("option", "minDate", selectedDate);
            $("#Enddate").datepicker("option", "maxDate", date); 
     }
});