jQuery-UI 的日期选择器的默认日期范围

debugcn 发表于 Dev

大卫布里顿

我正在使用 jQuery-UI 创建日期范围字段。我想要做的是让我的 StartDate 默认为今天的日期减去 7 天，并将我的 EndDate 默认为“今天的”日期。如果用户想要更改日期，仍然允许更改日期。以及不允许用户选择未来的日期（在今天的日期之后）。这一切都可以通过 jQuery-UI 的日期选择器实现吗？

<script>
  $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#StartDate" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#EndDate" ).datepicker({
        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;
    }
  } );
  </script>

<span class="srch_title" for="StartDate">From</span>
<input type='text' name="StartDate" id="StartDate" value="" required/>

<span class="srch_title" for="EndDate">To</span>
<input type='text' name="EndDate" id="EndDate" value="" required/>

https://jsfiddle.net/bobrierton/fdLy2n12/

任何帮助将不胜感激！

查理特

如果我正确理解标准，以下内容应该符合预期

$(function() {
  var today = new Date(),
    weekAgo = new Date(),
    $from = $("#StartDate"),
    $to = $("#EndDate");

  weekAgo.setDate(today.getDate() - 7);

  $from.datepicker({   
    maxDate: today,
    onSelect: function(dateText) {
      $to.datepicker("option", "minDate", dateText);
    }
  }).datepicker('setDate', weekAgo);

  $to.datepicker({
    maxDate: today,
    minDate: weekAgo,
    onSelect: function(dateText) {
      $from.datepicker("option", "maxDate", dateText);
    }
  }).datepicker('setDate', today);

});

不确定是否from需要 minDate

DEMO

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。