如何在JavaScript/jQuery中指定日期范围

嘿，我来帮你搞定在JavaScript/jQuery里设置日期范围的需求～结合你提供的代码（已经引入了jQuery和Bootstrap），我给你两种常用的实现方式：

一、原生JavaScript结合HTML5日期输入框 #

如果你的页面用了HTML5的<input type="date">，可以直接通过min和max属性限制范围，也能用JS动态修改：

1. 静态设置范围 #

直接在HTML里写死日期范围：

<input type="date" id="startDate" min="2024-01-01" max="2024-12-31">
<input type="date" id="endDate" min="2024-01-01" max="2024-12-31">

2. 动态设置范围（比如结束日期不能早于开始日期） #

用JS监听开始日期的变化，动态更新结束日期的min值：

document.getElementById('startDate').addEventListener('change', function() {
  const startDate = this.value;
  document.getElementById('endDate').setAttribute('min', startDate);
});

二、jQuery结合Bootstrap日期选择器（更友好的交互） #

因为你已经引入了Bootstrap和jQuery，推荐用Bootstrap Datepicker插件（需要额外引入插件的CSS和JS，直接加到现有代码里即可）。下面是完整的整合示例：

1. 补充引入插件资源（加到你的<head>里） #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- 如果需要西班牙语本地化，再加这个 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.es.min.js"></script>

2. 添加日期输入框到你的表单 #

<div class="form-group">
  <label for="startVacation">Fecha de inicio</label>
  <input type="text" class="form-control datepicker" id="startVacation">
</div>
<div class="form-group">
  <label for="endVacation">Fecha de fin</label>
  <input type="text" class="form-control datepicker" id="endVacation">
</div>

3. 编写jQuery代码初始化日期选择器并设置范围 #

$(document).ready(function() {
  // 初始化日期选择器，设置西班牙语
  $('.datepicker').datepicker({
    language: 'es',
    format: 'dd/mm/yyyy', // 适配西班牙语常用的日期格式
    autoclose: true,
    startDate: new Date() // 可选：限制不能选择今天之前的日期
  });

  // 双向限制日期范围：结束日期不能早于开始日期
  $('#startVacation').on('changeDate', function(e) {
    $('#endVacation').datepicker('setStartDate', e.date);
  });

  // 开始日期不能晚于结束日期
  $('#endVacation').on('changeDate', function(e) {
    $('#startVacation').datepicker('setEndDate', e.date);
  });
});

三、结合你提供的现有代码结构 #

把上面的代码整合到你的页面后，最终的核心结构大概是这样：

<html lang="es">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Solicitud De Vacaciones</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
  <!-- 新增Bootstrap Datepicker资源 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.es.min.js"></script>
</head>
<body>
  <div class="bootstrap-iso">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form method="post">
            <!-- 你的其他表单字段 -->
            <div class="form-group">
              <label for="startVacation">Fecha de inicio</label>
              <input type="text" class="form-control datepicker" id="startVacation" name="startVacation">
            </div>
            <div class="form-group">
              <label for="endVacation">Fecha de fin</label>
              <input type="text" class="form-control datepicker" id="endVacation" name="endVacation">
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary">Enviar Solicitud</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('.datepicker').datepicker({
        language: 'es',
        format: 'dd/mm/yyyy',
        autoclose: true,
        startDate: new Date()
      });

      $('#startVacation').on('changeDate', function(e) {
        $('#endVacation').datepicker('setStartDate', e.date);
      });

      $('#endVacation').on('changeDate', function(e) {
        $('#startVacation').datepicker('setEndDate', e.date);
      });
    });
  </script>
</body>
</html>

这样就能实现友好的日期范围交互：用户选了开始日期后，结束日期无法选择更早的日期；反之选了结束日期，开始日期也不能选更晚的，完全适配你的假期申请场景～

内容的提问来源于stack exchange，提问作者user9338258