ReactJS中如何禁用原生日期输入框的未来日期？

问题描述 #

我目前使用原生的<input type="date">标签（没有用任何第三方日期选择器组件），代码运行正常，现在想要实现禁用未来日期的功能，我的代码如下：

<div className="form-group col-md-6">
  <label for="inputDate4">Date of Birth</label>
  <input 
    type="date" 
    className="form-control" 
    id="inputDate4" 
    placeholder="Date of Birth" 
    name="dob" 
    onChange={this.handleChange} 
  />
</div>

原生input的解决方案 #

要禁用未来日期，你可以利用原生date类型input自带的max属性，把它设置为当前日期即可。因为max属性要求的格式是YYYY-MM-DD，我们可以通过JavaScript动态获取并格式化当前日期：

类组件中动态设置（React场景）

你可以在组件的componentDidMount生命周期钩子中添加逻辑：

componentDidMount() {
  // 格式化当前日期为YYYY-MM-DD格式
  const today = new Date().toISOString().split('T')[0];
  document.getElementById('inputDate4').setAttribute('max', today);
}

或者更贴合React写法的方式，直接在input标签上绑定max属性：

<input 
  type="date" 
  className="form-control" 
  id="inputDate4" 
  placeholder="Date of Birth" 
  name="dob" 
  onChange={this.handleChange}
  max={new Date().toISOString().split('T')[0]}
/>

纯JavaScript方式（非React场景）

如果是普通的HTML/JS环境，直接通过DOM操作设置即可：

const today = new Date().toISOString().split('T')[0];
document.getElementById('inputDate4').max = today;

设置完成后，用户就无法选择当前日期之后的日期了。

补充：已解决方案 #

我后来改用了React Date Picker组件，操作起来十分简便，也轻松实现了禁用未来日期的需求。

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