How to transform date in React Component

Question

I am trying to convert date and time to simpler format, in particular i'd like to understand how can i convert this: 2020-12-20T09:30:00.485Z (UTC) to this: 2020-12-20 10:30 (UTC+1)

in the following React Component ({day.date}):

import React, { useEffect } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { detailsDate } from '../actions/dateAction';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';

function BookingConfirmationScreen(props) {  

  const dayId = props.match.params.id;

  const dateDetails = useSelector((state) => state.dateDetails);
  const { day, loading, error } = dateDetails;

  const dispatch = useDispatch();
  useEffect(() => {

      dispatch(detailsDate(dayId));
      // eslint-disable-next-line no-console
    return () => {};
  }, [dispatch, dayId]);


  return (
    <div>
      {loading ? (
        <LoadingBox />
    ) : error ? (
      <MessageBox variant="error">{error}</MessageBox>
    ) : (
      
      <h1> Booking {day.date}</h1>
    )}
    </div>
  
  )
}

export default BookingConfirmationScreen;

score 1 · Answer 1 · answered Dec 20 '20 at 21:06

1

I suggest you take a look at the date-fns library. It's exactly for this kind of thing:

https://github.com/date-fns/date-fns

answered Dec 20 '20 at 21:06

Flagship1442

1,688
2
6
13

score 0 · Answer 2 · answered Dec 20 '20 at 21:30

0

I resolved with the following:

import dateFormat from 'dateformat';

<h1> Booking {dateFormat(day.date, "dddd, mmmm dS, yyyy, h:MM:ss TT")}</h1>

answered Dec 20 '20 at 21:30

Francesco

549
1
8
14

How to transform date in React Component

2 Answers2