在 React 中使用 moment.js 格式化日期的问题

Question

I was creating weather app in React by using Open Weather Map API and as you know, API gives us data on 5 day/3 hour forecast. Moreover, since API by default uses a GMT Unix timestamp format I decided to format it into "MM-DD-YYYY" to work with date easily. But the problem is when I try to further convert "MM-DD-YYYY" into LT format in moment.js I lose time date in date and by default all time gets 12:00 AM. Is it true that if we try to convert original GMT Unix timestamp format into "MM-DD-YYYY" and then further convert "MM-DD-YYYY" into "LT" we will lose time that was in GMT Unix timestamp?

import React, { Fragment, Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import SearchBox from "./Containers/SearchBox/SearchBox";
import Header from "./Components/Header/Header";
import styles from "./App.module.css";
import CardContainer from "./Containers/CardContainer/CardContainer";
import Footer from "./Components/Footer/Footer";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import About from "./Components/About/About";
import axios from "axios";
import WeatherDay from "./Components/WeatherDay/WeatherDay";
class App extends Component {
  state = {
    title: null
  };

  getTitle = location => {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/forecast?q=${location}&APPID=7ad09d078633b652ecef8587a337639e&units=metric`
      )
      .then(res => {
        this.setState({
          title: res
        });
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    return (
      <Router>
        <div className={styles.App}>
          <Fragment>
            <Header title={"Weather App"} />
            <Switch>
              <Route
                path="/"
                exact
                render={props => (
                  <Fragment>
                    <div className="container">
                      <SearchBox getRequest={this.getTitle} />
                    </div>
                    <main className={styles.mainContent}>
                      <h1 className={styles.cityWeather}>
                        {this.state.title && this.state.title.data.city.name}
                      </h1>
                      <CardContainer
                        weatherData={
                          this.state.title && this.state.title.data.list
                        }
                      />
                    </main>
                  </Fragment>
                )}
              />

              <Route path="/about" component={About} />
              <Route
                path="/day/:date"
                render={props => (
                  <WeatherDay {...props} title={this.state.title} />
                )}
              />
            </Switch>
            <Footer copyright={"Copyright 2018"} />
          </Fragment>
        </div>
      </Router>
    );
  }
}

export default App;


import React from "react";
import "./WeatherDay.module.css";
import moment from "moment";
const WeatherDay = props => { // This is the component where I have a problem with conversion
  const allDays =
    props.title &&
    props.title.data.list.map(item => ({
      date: moment(new Date(item.dt_txt)).format("MM-DD-YYYY"),
      main: item.main,
      weather: item.weather
    }));
  const chosenDate = props.match.params.date;

  const day =
    props.title &&
    allDays.filter((item, index) => {
      return item.date === chosenDate;
    });

  const mir =
    props.title &&
    day.map(item => { //Here I am trying to convert "MM/DD/YYYY" into "LT" and lose time info
      return <p>{moment(new Date(item.date)).format("LT")}</p>;
    });

  return (
    <div className="row">
      <div className="col-md-2"></div>
      {mir}
            </div>
          );
        })}
    </div>
  );
};

export default WeatherDay;

Answer 1

I think you mixed up sth. here. You should not use a time string to actually calculate it, only change the format for your date, but keep the actual moment object for further calculations. This way you always have the right time and dates.

Answer 2

I think you formatting on already formatted date. You should sustain the moment object instead of formatted date.

You should format the date only at the time of rendering. While passing we pass moment object.

Example

let parsed = moment(new Date())
let format1 = parsed.format('MM-DD-YYYY')
let format2 = parsed.format('LT')
console.log(format1) // 09-20-2019
console.log(format2) // 3:43 PM

Hope that helps!!!

Answer 3

I think the problem is due to this,

date: moment(new Date(item.dt_txt)).format("MM-DD-YYYY")

When you convert date as above it strips out time from it and you get simple date.

It should be this,

date: moment(new Date(item.dt_txt)).format("MM-DD-YYYY, h:mm:ss a")

Demo