如何显示日期(如结束日期，将来日期)取决于开始日期 [英] How to show date like end date future dates depends on start date

问题描述

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

I have two datepickers. I want to show enddate depends on startdate, not in reverse order.

示例:

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个约会.开始日期和结束日期不能相同..结束日期应该是将来的日期，取决于开始日期. http://jsfiddle.net/FdfPY/771/

I want to show only future dates in enddate after I selected startdate. How can I do it? I have only 2,16 dates for all months and years. start date and enddate should not be same..enddate should be future date depends on startdate. 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" />

推荐答案

JSFiddle

JSFiddle

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

I had trouble getting your example to work, so I had to add the labels in the HTML as I did in my example.

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

You were very close with your attempt by filtering available dates using the beforeShowDay param. I optimised it a bit and this seems to do the job. Using the onClose param on the first input you then set the minimum date on the second 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

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);
    }
});

我希望这会有所帮助.

这篇关于如何显示日期(如结束日期，将来日期)取决于开始日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！