如何设置日期选择器仅允许选择今日起45-90天内的日期

你当前设置max上限时用了加6个月的逻辑，远超出了「距今日90天」的要求，调整对应代码即可实现45~90天的选择区间限制。

修改步骤 #

1. 找到one()函数中设置max上限的代码行
2. 将原有代码：

d.setFullYear(d.getFullYear() , d.getMonth() + 6);

替换为：

d.setDate(d.getDate() + 45);

逻辑说明 #

• 变量d初始化时已经是今日+45天的日期，对应可选区间的下限
• 在此基础上再加45天，得到的就是今日+90天的日期，刚好是可选区间的上限
• 配合input原生的min和max属性，即可自动限制用户只能选择45~90天区间内的日期

修改后完整代码参考 #

<label id="asterisk">*</label> <label class="description" for="element_2">活动日期：</label><br /><label>预约需至少提前<b>45-90天</b>提交</label> <br /><input onclick="one()" required="" type="date" oninput="this.className = ''" name="Event-Date" id="datepicker1" min="2019-10-02" />
<script>if ( $('#datepicker1')[0].type != 'date' ) $('#datepicker1').datepicker();</script>

<script>
function formatISOLocal(d) {
  let z = n => ('0' + n).slice(-2);
  return d.getFullYear()+'-'+z(d.getMonth()+1) + '-' + z(d.getDate());
}

 function one() {
  let inp = document.querySelector('#datepicker1');
  // 计算可选下限：今日+45天
  let d = new Date(new Date().getTime()+(45*24*60*60*1000));
  inp.min = formatISOLocal(d);
  inp.defaultValue = inp.min;
  // 计算可选上限：下限+45天 = 今日+90天
  d.setDate(d.getDate() + 45);
  inp.max = formatISOLocal(d);
  // 调试日志
  console.log(inp.outerHTML);
}
</script>

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