jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

首先，我们需要在网站引入jQuery ui的库文件。可以通过以下方式引入：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0-rc.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0-rc.1/jquery-ui.min.js"></script>

引入成功后，我们就可以使用其中的datepicker插件来实现日期选择功能了。使用方式如下：

<input type="text" id="start_date">
<input type="text" id="end_date">

$(function() {
  $("#start_date").datepicker({
    dateFormat: 'yy-mm-dd', // 日期格式
    minDate: 0, // 最小日期
    onSelect: function(dateStr) { // 选择日期时触发的事件
      var minDate = $(this).datepicker('getDate');
      minDate.setDate(minDate.getDate() + 1);
      $("#end_date").datepicker('option', 'minDate', minDate);
    }
  });

  $("#end_date").datepicker({
    dateFormat: 'yy-mm-dd', // 日期格式
    maxDate: 7, // 最大日期
    onSelect: function(dateStr) { // 选择日期时触发的事件
      var maxDate = $(this).datepicker('getDate');
      maxDate.setDate(maxDate.getDate() - 1);
      $("#start_date").datepicker('option', 'maxDate', maxDate);
    }
  });
});

上面的代码实现了一个简单的日期选择功能。其中，使用了datepicker插件的minDate和maxDate选项来限制选择的日期范围。通过onSelect事件监听开始日期的选择，来动态的更新结束日期的minDate选项，保证结束日期在开始日期之后。同理，监听结束日期的选择，来动态更新开始日期的maxDate选项，保证开始日期不会晚于结束日期。

下面是另外一个例子，我们可以利用datepicker插件实现一个时间段选择器。代码如下：

<input type="text" id="date_range">

$(function() {
  var startDate, endDate, dateRange = $('#date_range');

  dateRange.datepicker({
    dateFormat: 'yy-mm-dd',
    rangeSelect: true, // 开启时间段选择
    onSelect: function(dateText, inst, extensionRange) {
      // 当开始和结束日期都选择完毕时，自动关闭选择框
      if (!extensionRange.endDate) {
        dateRange.val(extensionRange.startDateText + " to " + dateText).datepicker("hide");
        startDate = extensionRange.startDate;
        endDate = extensionRange.endDate;
      }
    }
  });
});

以上代码实现了一个时间段选择器，可以选择开始日期和结束日期。其中需要注意的是，需要在datepicker插件的选项中开启rangeSelect属性，才能使用时间段选择功能。而在onSelect事件中判断是否选择完毕，则可以通过extensionRange这个参数来实现。如果结束日期还未选择，则继续弹出日期选择框；否则将选择的日期显示在输入框中，并记录下开始和结束日期的Date对象，以便后续使用。

通过以上示例，我们可以看到，利用datepicker插件实现开始日期和结束日期的限制，从而实现日期选择功能非常容易。只需要添加相应的选项属性即可。