如何在使用状态钩子中以字符串格式获取当前日期
2023-08-02
584
我想在
useState
钩子变量中以字符串格式获取今天的日期（例如 2/08/2023）作为初始值。
当前工作代码：
const [startDate, setStartDate] = useState(new Date());
// output: Wed Aug 02 2023 12:52:16 GMT+0800 (Australian Western Standard Time)
以下是我尝试输出的内容（2/08/2023）：
// Trial #1
const [startDate, setStartDate] = useState(new Date().toLocaleDateString());
// Trial #2
let today = new Date().toLocaleDateString()
const [startDate, setStartDate] = useState(today)
不幸的是，这两种方法都会产生以下错误：
Uncaught RangeError: Invalid time value.
有人猜过如何解决这个问题吗？谢谢！
2个回答
出现
Uncaught RangeError: Invalid time value
错误是因为
toLocaleDateString()
方法返回的日期格式为
dd/mm/yyyy
，而该格式对于直接创建 JavaScript Date 对象而言并不是有效的输入。要将
startDate
的初始值设置为
2/08/2023
格式的字符串，您可以使用 Date 对象的
getFullYear()
、
getMonth()
和
getDate()
方法手动格式化日期。
以下是实现方法：
const currentDate = new Date();
const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;
const [startDate, setStartDate] = useState(formattedDate);
在此代码中，我们首先创建一个新的 Date 对象，然后手动构建所需的日期字符串，格式为
dd/mm/yyyy
。
getMonth()
方法返回一个从 0 到 11 的值，其中 0 代表一月，1 代表二月，依此类推。因此，我们将
getMonth()
值加 1 以获取正确的月份数。
这应该将
startDate
的初始值设置为今天的日期，格式为
2/08/2023
。
snowden
2023-08-02
您可以使用 moment.js 包：
npm i moment
并使用：
moment().format('l'); // 8/2/2023
或
moment().format('L'); // 08/02/2023
像这样：
import "./styles.css";
import moment from 'moment'
import { useState } from "react";
export default function App() {
const [startDate, setStartDate] = useState(moment().format('L'));
return (
<div className="App">
<h1>{startDate}</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
QasemBSK
2023-08-02