单击结束日期，显示与开始日期相同的选定月份

Question

我正在使用 bootstrap-datepicker

当我选择开始日期，例如 (21/03/2021)，然后尝试选择结束日期时，默认月份显示为当前月份（6 月 6 日）。单击结束日期时，如何显示所选开始日期的月份（三月）？

在这张图片中，我选择了 21/03/2021 作为开始日期，当我点击结束日期时，六月首先出现，我希望点击结束日期时显示三月

这是代码

<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>

Answer 1

当您的日期选择器打开时，您可以使用 defaultViewDate 设置默认视图。但是，要使其正常工作，您需要销毁先前的初始化日期选择器并重新初始化它。因此，您可以使用 datepicker 的 changeDate 事件来检查发生更改事件的输入是否来自 startDate 。然后，您可以使用 defaultViewDate 重新初始化 endDate 输入。

演示代码：

$('.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">