Question

我有两个日期选择器。我想显示结束日期取决于开始日期，而不是相反的顺序。

示例：

startdate:07/02/2018  enddate: 07/16/2018 == correct - should be enable 16
startdate:07/02/2018  enddate: 07/02/2018 == wrong -should be disable  02(enddate)

我想在选择开始日期后仅显示结束日期中的将来日期。我该怎么做？在所有月份和年份中，我只有2,16个约会。开始日期和结束日期不能相同。.enddate应该是将来的日期，取决于开始日期。 http://jsfiddle.net/FdfPY/771/

JS：

  var disabledDates = []
  $("#from").datepicker({
  minDate: 'D',
  dateFormat: "dd/mm/yy",
  defaultDate: "+1w",
  numberOfMonths: 1,
        beforeShowDay: function(d) { 
        if (d.getDate() == 2 || d.getDate() == 16) {
          return [true, "" ];
        } else {
           return [false, "" ];
        }
     },
  onClose: function(selectedDate) {
  disabledDates=[selectedDate];
    $("#to").datepicker("option", "minDate", selectedDate); 
     }
    });

  $("#to").datepicker({
  minDate: 0,
  dateFormat: "dd/mm/yy",
  defaultDate: "+1w",
  numberOfMonths: 1,
        beforeShowDay: function(d) {  

        if (d.getDate() == 2 || d.getDate() == 16) {
          return [true, "" ];
        } else {
           return [false, "" ];
        }
     } 
     });

HTML：

Start Date:<input type="text" name="date" id="from" readonly="readonly" size="12" />
End Date:<input type="text" name="date2" id="to" readonly="readonly" size="12" />

Answer 1

JSFiddle

我无法让您的示例正常工作，因此我不得不像在示例中那样在HTML中添加标签。

通过使用beforeShowDay参数过滤可用日期，您与尝试非常接近。我对其进行了一些优化，这似乎可以完成工作。在第一个输入上使用onClose参数，然后在第二个datePicker上设置最小日期。

HTML

<label for="from">From</label>
<input type="text" id="from" name="from" readonly size=12/>
<label for="to">to</label>
<input type="text" id="to" name="to" readonly size=12/>

JavaScript

function check_available_days(date) {
  const available_formatted_days_list = [2, 16];
  const currentDay = date.getDate();
  return available_formatted_days_list.includes(currentDay)
    ? [true, "", ""]
    : [false, "date-disabled", "Date not available"];
}

$("#from").datepicker({
    minDate: "dateToday",
    beforeShowDay: check_available_days,
    changeMonth: true,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate, instance) {
        if (selectedDate !== '') {
            $("#to").datepicker("option", "minDate", selectedDate);
            $("#to").datepicker("option", "maxDate", date);
        }
    }
});
$("#to").datepicker({
    minDate: "dateToday",
    beforeShowDay: check_available_days,
    changeMonth: true,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});

我希望这会有所帮助。

如何显示日期（如结束日期，将来日期）取决于开始日期

1 个答案: