如何在Material-UI的datetime-local类型TextField中设置未来默认时间

问题原因 #

你之前直接拼接当前年月日、再给小时做加法的写法，无法处理小时累加后超过23的跨天场景，也没有给不足两位的月份、日期、小时补前导零，会生成不符合<input type="datetime-local" />规范的字符串，导致默认值不生效。

正确实现 #

直接通过时间戳累加的方式计算目标时间，依赖Date对象自动处理跨天、跨月、跨年的进位逻辑，再格式化生成符合要求的字符串即可：

// 生成延后4小时的符合datetime-local格式的时间字符串
const getDefaultDateTime = () => {
  // 直接给当前时间戳加4小时对应的毫秒数，自动处理日期进位
  const targetDate = new Date(Date.now() + 4 * 60 * 60 * 1000);
  // 补前导零工具方法，确保月份、日期、小时、分钟都是两位
  const padZero = (num) => num.toString().padStart(2, '0');
  return `${targetDate.getFullYear()}-${padZero(targetDate.getMonth() + 1)}-${padZero(targetDate.getDate())}T${padZero(targetDate.getHours())}:${padZero(targetDate.getMinutes())}`;
}

// 组件调用部分
const defaultTime = getDefaultDateTime();

<TextField
  id="datetime-local"
  type="datetime-local"
  defaultValue={defaultTime}
  InputLabelProps={{
    shrink: true,
  }}
  InputProps={{ inputProps: { min: defaultTime } }}
  onChange={handleChange}
/>

补充说明 #

如果需要使用UTC时间而非用户本地时间，把代码里的getFullYear/getMonth/getDate/getHours/getMinutes替换为对应的UTC方法（getUTCFullYear/getUTCMonth等）即可。

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