Jquery 限制用户选择日期

Question

好的，我有一个包含三个字段的日期选项，即日期、月份和年份。

我想限制我的用户使用 Jquery，这样他们就不能选择超过 3 个月和 3 年的日期范围。

以下是我的字段

<select class="day">
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
.....
<option value="31">31</option>
</select>

<select class="month">
<option value="--"></option>
<option value="1">Jan</option>
<option value="2">Feb</option>
...
<option value="12">Dec</option>
</select>

<select class="year">
<option value="--"></option>
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
....
<option value="2099">2099</option>
</select>

Answer 1

您可以使用选择的日期而不是 3 个不同的选择。这个 sn-p 使用引导日期选择器的this version。

要将日期选择器限制在特定日期范围内，必须设置 endDate (more info about the option) 或 startDate (more info about the option) 选项（或同时设置两者）。这两个选项都接受特定的插件日期格式：

• + 表示积极的日期，未来的日期
• - 表示否定日期，过去的日期
• 10d 指定天数，在本例中为 10
• 2m 指定月份数，在本例中为 2
• 1y 指定年数，在本例中为 1

因此，如果您需要将初始日期限制为从现在起的 3 年零 3 个月，您需要将 startDate 设置为 -3y -3m。

希望对你有帮助。

$('.input-daterange').datepicker({
  startDate: "-3y -3m", // 3 years and 3 months from now
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-sm form-control" name="start" />
        <span class="input-group-addon">to</span>
        <input type="text" class="input-sm form-control" name="end" />
    </div>