0

I'm using bootstrap-datepicker

When I select the start date, example (21/03/2021), and then try to select the end date, the default month apprears is the current month (06 June). How can I show the month of start date selected (March) when click on end date?

In this image, I selected 21/03/2021 as start date, and when I click on end date , the month June appears first, I'd like March to be shown when click on end date

enter image description here

This is the code

<input type="text" id="startDate" name="startDate" required="required" class="datepicker-input form-control">

<input type="text" id="endDate" name="endDate" required="required" class="datepicker-input form-control">

<script>
    $('.datepicker-input').datepicker({
    format: "dd/mm/yyyy",
    todayBtn: "linked",
    clearBtn: true,
    language: "fr",
 });
</script>
hous
  • 2,577
  • 2
  • 27
  • 66
  • Does this answer your question? [Bootstrap datepicker change minDate/startDate from another datepicker](https://stackoverflow.com/questions/30456270/bootstrap-datepicker-change-mindate-startdate-from-another-datepicker) – Don't Panic Jun 27 '21 at 10:09
  • Also https://stackoverflow.com/questions/28381303/start-date-and-end-date-in-bootstrap, https://stackoverflow.com/questions/37101656/define-start-date-of-second-date-picker-from-first-date-picker ... – Don't Panic Jun 27 '21 at 10:09

1 Answers1

1

You can use defaultViewDate to set default view when your datepicker is open . But , for this to work you need destroy previous initialize datepicker and reinitialize it . So , you can use changeDate event of datepicker to check if the input where change event has occur is from startDate or not . Then , you can reinitialize your endDate input with defaultViewDate .

Demo Code :

$('.datepicker-input').datepicker({
  format: "dd/mm/yyyy",
  todayBtn: "linked",
  clearBtn: true,
  language: "fr",
}).on('changeDate', function(selected) {
  //check if the id is of startdate..
  if ($(this).attr("id") == "startDate") {
    var startDate = new Date(selected.date.valueOf()); //get value..
    $("#endDate").datepicker("destroy") //destroy.. pulgin..
    //set defaultViewDate 
    $("#endDate").datepicker({
      defaultViewDate: {
        year: moment(startDate).format("YYYY"),
        month: moment(startDate).format("MM") - 1 //cuz month start from 0
      },
      format: 'dd/mm/yyyy'
    });
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />

<input type="text" id="startDate" name="startDate" required="required" class="datepicker-input form-control">

<input type="text" id="endDate" name="endDate" required="required" class="datepicker-input form-control">
Swati
  • 28,069
  • 4
  • 21
  • 41