reactjs 如何在UseState钩子中使用字符串格式的当前日期

wnavrhmk 于 2023-08-04 发布在 React

关注(0)|答案(4)|浏览(116)

我想以字符串格式获取今天的日期（例如：2/08/2023）在useState钩子变量中作为初始值。
当前工作代码：

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.

型
有没有人能猜到怎么解决这个问题？谢谢你，谢谢

reactjs

来源：https://stackoverflow.com/questions/76816782/how-to-have-current-date-in-string-format-inside-the-use-state-hook

4条答案

按热度按时间

bweufnob1#

发生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月，1表示2月，依此类推。因此，我们将getMonth()值加1以获得正确的月数。
这应该将startDate的初始值设置为今天的日期，格式为2/08/2023。

赞(0）回复(0）举报 2023-08-04

yiytaume2#

你可以使用moment.js包：
npm i矩
并用途：

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>
  );
}

型
文件：https://momentjs.com/

赞(0）回复(0）举报 2023-08-04

fcipmucu3#

范围错误：出现无效时间值错误的原因是，toLocaleDateString（）方法返回格式为“M/D/YYYY”（例如，“8/2/2023”）的字符串，并且当您将此字符串传递给useState挂接时，它尝试从该字符串创建新的Date对象，但无法识别该格式，从而导致错误。
要解决此问题并将今天的日期以“2/08/2023”格式存储在useState挂接变量中，您可以在将日期传递给挂接之前手动设置日期格式。实现这一点的一种方法是创建自定义格式函数。
以下是您的操作方法：

const formatDate = (date) => {
  const day = date.getDate().toString().padStart(2, '0');
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
};

const today = new Date();
const [startDate, setStartDate] = useState(formatDate(today));

字符串
在此代码中，formatDate函数接受Date对象并返回“D/MM/YYYY”格式的格式化日期字符串。它使用getDate（）、getMonth（）和getFullYear（）方法分别提取日、月和年组件。padStart方法用于确保日和月组件始终为两位数。“
现在，startDate变量将以所需的格式（“2/08/2023”）保存今天的日期作为初始值。

赞(0）回复(0）举报 2023-08-04

vlju58qv4#

您的两种方法也适用于我的本地项目。
你有没有使用过任何传递状态的库？例如，下面的错误来自react-datepicker库：Getting a RangeError: Invalid Time Value when using React datepicker

赞(0）回复(0）举报 2023-08-04