如何在 React 组件中转换日期答案

【问题标题】：How to transform date in React Component如何在 React 组件中转换日期
【发布时间】：2020-12-20 20:35:22
【问题描述】：

我正在尝试将日期和时间转换为更简单的格式，特别是我想了解如何转换：2020-12-20T09:30:00.485Z (UTC) 至此：2020-12-20 10:30 (UTC+1)

在以下 React 组件中（{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;

【问题讨论】：

标签： reactjs date time utc

【解决方案1】：

我建议你看看 date-fns 库。正是为了这种事情：

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

【讨论】：

【解决方案2】：

我解决了以下问题：

import dateFormat from 'dateformat';

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

【讨论】：