如果我想根据第一个选择的日期设置另一个日期选择器，如何管理两个日期选择器？ Bootstrap 日期选择器

Question

这是我的代码。我想根据第一个日期选择器中选择的日期设置日期。我该怎么做？

<input type="text" placeholder="From" class="week" id="dt1">
<input type="text" placeholder="To" class="week" id="dt2">

$(function() {
  $("#dt1").datepicker({
    minDate: "-",
    maxViewMode: "weeks",
    format: "dd-mm-yy",
    clearBtn: true,
    orientation: "bottom auto"
      /*calendarWeeks: true,
      todayHighlight: true*/
  });

  $("#dt2").datepicker({
    minDate: 0,
    format: 'dd-mm-yyyy',
    endDate: "today"
  })
});

Answer 1

好的，所以根据给定的选项，您只需要 "listen" 当日期发生变化时，这基本上就是提供的事件所做的，所以我们将在两个 #From 上使用 changeDate #To 选择器只允许 select 那一周的日期。

注意 1： 我建议您禁用 #To 以避免选择器日期提前，但没有它应该是一样的。

注2：我删除了你注释掉的代码

<input type="text" placeholder="From" class="week" id="dt1">
<input type="text" placeholder="To" disabled="disabled" class="week" id="dt2">

$(function() {
  $("#dt1").datepicker({
    minDate: "-",
    maxViewMode: "weeks",
    format: "dd-mm-yy",
    clearBtn: true,
  }).on('changeDate', function(event) {
    $('#dt2').removeAttr('disabled'); //We enable our #To Picker
    var newDate = new Date(event.date);
    newDate.setDate(newDate.getDate() + 6); //We add 6 days to our selected date
    $("#dt2").datepicker("setStartDate", event.date); //Set as start point that selected day 
    $("#dt2").datepicker("setEndDate", newDate); //Set the final "MaxDate

  });
   //We do the same for this one but backwards to avoid puttin "invalid" dates
  $("#dt2").datepicker({
    minDate: 0,
    format: 'dd-mm-yyyy',
    endDate: "today"
  }).on('changeDate', function(event) {
    var newDate = new Date(event.date);
    newDate.setDate(newDate.getDate() - 6);

    //You can alway remove this line to allow your user to select any start date
    $("#dt1").datepicker("setStartDate", newDate);
    //And here we set our max date on From picker so he doesn't again enter "invalid" dates
    $("#dt1").datepicker("setEndDate", event.date);

  });
});

如果我想根据第一个选择的日期设置另一个日期选择器，如何管理两个日期选择器？ Bootstrap 日期选择器

How do I manage two datepickers if I want to set another datepicker according to date selected in first? Bootstrap datepicker

datepicker

bootstrap-datepicker