在 React 中将 ISO 日期时间格式转换为可读格式

Question

我正在从本地主机的 API 中获取数据。我得到的日期和时间格式如下：

"2021-12-08T13:52:16.043"

我只想删除时间部分，只显示日期。类似于：

2021-12-08 or 2021/12/08 does not matter.

这是我在 React 中的代码

{allComments.map(c=> (
    <div>
      <p>{c.time.toLocalDateString()}</p>
    </div>
  )
)}

这是行不通的。错误说 toLocalDateString() 不是函数。那是我经过一些研究发现的。有人可以帮我写写功能以及如何使用它吗？

Answer 1

您需要将日期字符串解析为实际的 Date object and then call toLocaleDateString。

有关格式选项，请参阅：Intl.DateTimeFormat

const c = { time: '2021-12-08T13:52:16.043' };

console.log(new Date(c.time).toLocaleDateString()); // 12/8/2021

或者：

const c = { time: '2021-12-08T13:52:16.043' };

console.log(new Date(c.time).toLocaleString('en-US', {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
})); // 12/8/2021

这是 React 中的一个示例，它使用不同的 date-time 格式显示和元素标题。

const { useEffect, useMemo, useState } = React;

// Quick and dirty way to has a string for use as a key
const keyHash = (text) => CryptoJS.MD5(text).toString();

const fetchComments = () => Promise.resolve([
  { time: '2021-12-08T13:52:16.043', text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." },
  { time: '2021-12-09T13:52:16.043', text: "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." },
]);

const CommentTime = (props) => {
  const { time, locale = 'en-US' } = props;
  
  const display = useMemo(() => (
    new Date(time).toLocaleDateString(locale)
  ), [time]);
  
  const tooltip = useMemo(() => (
    new Date(time).toLocaleString(locale, {
      dateStyle: 'full',
      timeStyle: 'full'
    })
  ), [time]);
  
  return (
    <div className="comment-time" title={tooltip}>{display}</div>
  )
};

const CommentEntry = (props) => {
  const { time, text } = props;
  return (
    <div className="comment-entry">
      <CommentTime time={time} />
      <div className="comment-text">{text}</div>
    </div>
  );
};

const CommentStream = (props) => {
  const { comments } = props;
  return (
    <div className="comment-stream">
      {comments.map(({ text, time }) => (
        <CommentEntry key={keyHash(text)} text={text} time={time} />
      ))}
    </div>
  )
};

const App = ({title}) => {
  const [comments, setComments] = useState([]);

  useEffect(() => fetchComments().then(setComments), []);

  return (
    <div>
      <CommentStream comments={comments} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('react-app'));

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #FFF;
}

.comment-stream {
  display: flex;
  flex-direction: column;
  padding: 0 4vw;
  gap: 0.5em;
}

.comment-entry {
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  border: thin solid #000;
  background: #444;
  font-size: 0.9rem;
}

.comment-time {
  font-size: 0.667rem;
  font-style: italic;
  color: #DDD;
}

.comment-text {
  margin-top: 0.25em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react-app"></div>

在 React 中将 ISO 日期时间格式转换为可读格式

Converting ISO datetime format to readable format in React

javascript

api

datetime-format

reactjs

react-native