反应代码以格式化方式显示日期并限制未来日期

Question

在 REact 中我有一个像这样的状态变量

    const [ dob, setDob ] = useState();

在 jsx 中我是这样的

<input type="date" max="new Date()" value = {dob} onChange={(e)=>setDov(e.target.value)}/>

我面临两个问题

我无法限制未来的日期，即无法选择今天之后的所有日期，但是当我提供 max 属性时，我无法限制未来的日期

new Date() or new Date().getTime()

我需要以这种格式显示选择后的日期DD/MM/YYYY我无法显示转换后的日期date.For我尝试将 onChange() 修改为 onChange()=>setDob(new日期(e.target.value.tolocaleTimestring())) 但它仍然不起作用。我收到错误 toLocaleString() is not a function

注意：- 我正在使用 React 和纯功能组件

Answer 1

您在代码中有多个error/problem：

1- 不能在html变量中添加JS代码，HTMLmax属性接受文本。你在那里遇到的另一个问题（如果 max 接受 JS 表达式的事件）是 new Date () 不匹配它接受的格式，你必须将它转换为 ISO 标准 即 new Date().toISOString().

2- 我不确定你在这里遇到的问题是什么，我添加了一个对我有用的片段，它解决了（1 和 2）。

const [ dob, setDob ] = useState();
 const today = new Date().toISOString();
  return (
    <div >
   <input type="date" max={today} value = {dob} onChange={(e)=>setDob(e.target.value)}/>
    </div>
);

Answer 2

如果您查看 MDN 文档以了解日期类型和限制输入，则可以在输入上使用 min 和 max 属性。所以你所做的是正确的，除了将一个字符串传递给 max。我认为它需要是一个字符串（可解析到日期）或日期对象。

例如

<input type="date" max={new Date()} value = {dob} onChange={(e)=>setDov(e.target.value)}/>

参考 - https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types#constraining_datetime_values 了解更多详情。

反应代码以格式化方式显示日期并限制未来日期

React code to display date in Formatted Way and limit future dates

javascript

date

reactjs

react-hooks

use-state