React中如何为datetime-local类型input设置当前时间为min最小值

失效原因 #

type="datetime-local" 的原生input对min属性的格式有严格要求，必须传入符合 YYYY-MM-DDTHH:mm 规范的字符串。
你原有写法使用的new Date().toLocaleString()返回的是本地化格式的日期文本（例如中文环境下为2024/5/20 15:20:00），和要求的格式不匹配，因此浏览器无法识别最小值限制规则。

原有错误写法：

<input min = {new Date().toLocaleString()}  id = "date" type = "datetime-local"/>

正确实现方式 #

首先需要将当前时间转换为符合要求的格式，注意直接调用new Date().toISOString()返回的是UTC时区的时间，会和本地时间存在时差，因此需要手动生成本地时区的对应格式字符串：

// 生成本地时区的YYYY-MM-DDTHH:mm格式字符串
const getCurrentDatetimeLocal = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day}T${hours}:${minutes}`;
}

在JSX中直接调用函数传入min属性即可：

<input 
  min={getCurrentDatetimeLocal()}  
  id="date" 
  type="datetime-local"
/>

补充说明 #

• 部分浏览器只会在表单提交时校验datetime-local的取值是否符合min/max限制，如果需要实时拦截非法输入，可以配合onChange事件做二次校验
• 如果需要秒级限制，可以将格式扩展为YYYY-MM-DDTHH:mm:ss，在生成字符串时补充秒数逻辑即可

内容的提问来源于stack exchange，提问作者Βαρβάρα Ξιάρχου