如何为date输入框设置min为今日、max为今日+30天？

1. 能否通过本地日期禁用指定日期范围？ #

可以直接用HTML的input[type="date"]自带的min和max属性实现，只要给这两个属性设置符合YYYY-MM-DD格式的日期字符串，就能自动禁用范围外的日期（灰化无法选择）。比如你提供的代码就已经限制了只能选2023-06-02到2023-07-02之间的日期。

2. 怎么把min设为今日、max设为今日起30天后？必须用JavaScript实现吗？ #

是的，必须用JavaScript实现——HTML本身没有动态获取当前日期并计算未来日期的能力，得靠JS来动态计算并赋值。

简便实现代码： #

直接给日期输入框加个ID，用JS获取当前日期、计算30天后的日期，格式化后赋值给min和max属性：

<input type="date" id="dateRangePicker">

<script>
// 获取当前日期对象
const today = new Date();
// 计算30天后的日期
const thirtyDaysLater = new Date(today);
thirtyDaysLater.setDate(today.getDate() + 30);

// 工具函数：把日期对象转成YYYY-MM-DD格式
function formatDate(date) {
  const year = date.getFullYear();
  // 月份从0开始，要加1，并且补0成两位
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 给输入框设置范围
const picker = document.getElementById('dateRangePicker');
picker.min = formatDate(today);
picker.max = formatDate(thirtyDaysLater);
</script>

这段代码会自动把可选日期限制在今日到今日起30天内，刷新页面时会重新计算日期，保证范围始终是动态的。

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