React中如何通过type为date的TextField仅获取年份？

原生的type="date"输入框并没有直接提供仅选择年份的属性，但可以通过以下几种可靠方式实现需求：

方法一：处理日期输入，提取年份并适配格式 #

利用date类型输入框的日历选择器，在onChange事件中提取选中日期的年份，同时为输入框的value属性补全默认的月日（因为date类型要求值为YYYY-MM-DD格式）。

修改你的代码如下：

// 状态更新逻辑示例
const handleChange = (e) => {
  const selectedDate = e.target.value;
  if (selectedDate) {
    // 提取年份：两种方式任选其一
    const selectedYear = new Date(selectedDate).getFullYear().toString();
    // 或者 const selectedYear = selectedDate.slice(0, 4);
    setFormValues(prev => ({ ...prev, year: selectedYear }));
  }
};

// 渲染TextField组件
<TextField
  key={"input-year"}
  InputLabelProps={{ shrink: true }}
  required
  fullWidth
  variant="outlined"
  type="date"
  label="Year"
  margin="dense"
  onChange={handleChange}
  // 补全默认月日，确保date输入框能正常渲染
  value={formValues?.year ? `${formValues.year}-01-01` : ""}
/>

用户通过日历选择日期后，组件只会保存并处理年份信息，显示时也会以完整的日期格式适配输入框要求。

方法二：改用数字输入框直接获取年份 #

如果不需要日历选择器，只需要用户输入年份，可以将type改为number，并设置合理的范围限制：

<TextField
  key={"input-year"}
  InputLabelProps={{ shrink: true }}
  required
  fullWidth
  variant="outlined"
  type="number"
  label="Year"
  margin="dense"
  onChange={handleChange}
  value={formValues?.year}
  // 设置年份范围，比如从1900到当前年份
  inputProps={{ min: 1900, max: new Date().getFullYear() }}
/>

这种方式更直接，用户无需通过日历选择，直接输入数字即可，也不需要处理日期格式的兼容问题。

不推荐的方法：通过CSS隐藏月日部分 #

虽然可以用CSS隐藏date输入框的月日选择区域，但不同浏览器的DOM结构差异很大，样式兼容性差，且用户仍能手动输入月日信息，所以不建议使用：

/* Chrome/Safari */
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field {
  display: none;
}
/* Firefox */
input[type="date"]::-moz-date-edit-part {
  display: none;
}

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