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

Question

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

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

这是代码

<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 设置日期选择器打开时的默认视图。但是，要使其正常工作，您需要销毁之前的初始化日期选择器并重新初始化它。因此，您可以使用日期选择器的 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">

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

on click on end date, show the same selected month of start date

jquery

datepicker

bootstrap-datepicker