jQuery 日期选择器 - 相对于彼此更改日期

Question

您好，我正在尝试创建一个预订表格，用户只能在其中选择 1 到 14 天（从当前日期 +1）。我遇到的问题是 EndDate（此处为#til）设置为从今天开始算起 14 天。因此，如果我在 StartDate（此处#fra）前一个月，我将无法在 EndDate 中选择任何内容。

如何使 EndDate 相对于 StartDate 设置？

$( function valgavdato() {
var dateFormat = "mm/dd/yy",

    from = $( "#fra" )
      .datepicker({
        minDate: '0+',
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        to.datepicker( "option", "minDate", getDate( this ) );
      }),
    to = $( "#til" ).datepicker({
      maxDate: '14+',
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1
    })
    .on( "change", function() {
      from.datepicker( "option", "maxDate", getDate( this ) );
    });

  function getDate( element ) {
    var date;
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }

    return date;
  }
} );

Answer 1

问题是 maxDate 在加载时设置为 "today" +14。
你要计算14天+选择的日期...

所以，这是有效的方法。
它可能不是最简洁的编码方式...
但仍然......它有效。

唯一的变化（添加）在 #fra 变化中。

$( function valgavdato() {
    var dateFormat = "mm/dd/yy",
        to_MaxDate = 14;    // From date + this = to maxDate

        from = $( "#fra" )
    .datepicker({
        minDate: '0+',
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
    })
    .on( "change", function() {
        var PickedDate = getDate( this );
        // See that date is in UTC format.
        console.log( "From DatePicker: "+JSON.stringify(PickedDate) );
        
        // Process the picked date.
        var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date.
        var tempMonth = PickedDate.getMonth() + 1;   // Because months are zero based.
        var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based
        console.log( "Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it.");

        // Create a date object in a UTC format.
        var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 23, 59, 59));
        console.log(  "New max date: : "+ JSON.stringify(newMaxDate) );

        // Set the minDate ans maxDate options.  
        to.datepicker( "option", {"minDate": PickedDate, "maxDate": newMaxDate});

    }),
        to = $( "#til" ).datepicker({
            maxDate: '14+',
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1
        })
    .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
    });

    function getDate( element ) {
        var date;
        try {
            date = $.datepicker.parseDate( dateFormat, element.value );
        } catch( error ) {
            date = null;
        }

        return date;
    }
} );

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>



<input type="text" id="fra"><br>
<br>
<input type="text" id="til">

jQuery 日期选择器 - 相对于彼此更改日期

jQuery Date Picker - changing the date relative to each other

jquery

jquery-ui

datepicker

jquery-ui-datepicker