React中如何移除日期类型TextField的提示文本？

核心原因 #

原生HTML的date类型输入框不支持placeholder属性，浏览器会默认显示yyyy-mm-dd这类提示文本，直接设置placeholder=""无效。同时结合react-hook-form的Controller时，值的处理逻辑也会影响显示效果。

具体解决方案 #

1. 正确处理输入框的值
   确保当表单值为空时，TextField的value设为空字符串；若值为Date对象，需转换为yyyy-MM-dd格式的字符串（这是date类型输入框要求的标准格式）。
2. 移除无效的defaultValue设置
   Controller会接管表单值的管理，无需在TextField上设置defaultValue={{}}，应在useForm的defaultValues中统一配置默认值。
3. 隐藏浏览器默认提示文本
   通过CSS伪元素隐藏无焦点时的默认提示，聚焦时恢复正常显示，兼顾空状态视觉效果与输入体验。

修改后的代码 #

<Grid item xs={6}>
    <Controller
        name={"periodTo-" + input.index}
        control={input.form}
        render={({field: {onChange, value}, fieldState: {error}}) => (
            <div style={{marginTop: "10px"}}>
                <InputLabel>end date</InputLabel>
                <TextField
                    style={{width:"100%"}}
                    className="date-input"
                    value={value ? new Date(value).toISOString().split('T')[0] : ''}
                    onChange={(e) => onChange(e.target.value)}
                    type="date"
                />
            </div>
        )}
    />
</Grid>

对应的CSS样式 #

/* 隐藏无焦点时的日期提示文本 */
.date-input::-webkit-datetime-edit-text,
.date-input::-webkit-datetime-edit-month-field,
.date-input::-webkit-datetime-edit-day-field,
.date-input::-webkit-datetime-edit-year-field {
  color: transparent;
}

/* 聚焦时恢复提示文本颜色，方便用户输入 */
.date-input:focus::-webkit-datetime-edit-text,
.date-input:focus::-webkit-datetime-edit-month-field,
.date-input:focus::-webkit-datetime-edit-day-field,
.date-input:focus::-webkit-datetime-edit-year-field {
  color: initial;
}

补充说明 #

• 如果你的表单值本身就是yyyy-MM-dd格式的字符串，无需转换，直接用value={value || ''}即可。
• 若不需要聚焦时的提示，也可以把聚焦后的颜色设为透明，但会影响用户输入体验，不推荐。

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