Converting ISO datetime format to readable format in React

Question

I am fetching data from an API in localhost. The date & time I get are in the following format:

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

I just want to remove the time part and show only the date. Something like:

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

this is my code in React

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

This is not working. The error says toLocalDateString() is not a function. Thats what I found after some research. Could someone please help me with the write function and how to use it?

It's because you should wrap your string in date object. Like this (new Date(c.time)).toLocalDateString() — Иван Яковлев, Dec 08 '21 at 20:25
Does this answer your question? [Parsing a string to a date in JavaScript](https://stackoverflow.com/questions/5619202/parsing-a-string-to-a-date-in-javascript) — Heretic Monkey, Dec 09 '21 at 14:54

Mr. Polywhirl · Accepted Answer · 2021-12-09T14:56:43.993

You will need to parse your date string into an actual Date object and then call toLocaleDateString.

For formatting options, see: Intl.DateTimeFormat

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

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

Alternatively:

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

Here is an example in React that uses different date-time formatting for display and element title.

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>

Great answer @Mr. Polywhirl, and thank you for linking the MDN examples. — James F. Thomas, Apr 11 '23 at 15:21

Converting ISO datetime format to readable format in React

1 Answers1