Moment.js |不显示预期的日期格式

Question

概览

我在我的网络应用程序中使用 moment.js 来允许用户 select 为他们的假期设定一个日期范围。在他们 select 所需的日期范围（例如，11 月 1 日到 11 月 3 日）之后，该应用会为每一天呈现一个容器（在本例中为 3 个容器），以允许用户计划每一天。该容器中的 div 之一包含当天的日期，该日期基于 selected 的原始日期。

目标

我需要每天将日期格式化为 "MMM-Do-YY"（11 月 11 日 19 日）。但是，我得到的格式每天都包含更多内容：2019 年 11 月 10 日星期日 00:00:00 GMT-0500。

我试过的

我正在使用事件处理程序函数 onDateChange（见下文），我试图在其中为开始日期和结束日期提供格式设置。 onDateChange 由渲染方法中的两个输入字段更新。 onDateChange 设置状态后，我在 render 方法中有一个 ul 映射状态并为每一天创建一个容器。该容器是一个名为 DayContainer 的组件实例（该组件的代码在下面）。

我认为错误的最佳猜测

我认为问题在于 DayContainer class 的渲染方法。其中的第二个 div 是呈现日期的内容。我正在使用 this.state.date.toString，我认为这就是需要修改的地方。

import React from 'react';
import './ItineraryContainer.css';
import * as moment from "moment";
import DayContainer from '../DayContainer/DayContainer';


class ItineraryContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      startDate: '',
      endDate: '',
      days: [],
    }
  }

  onDateChange(e){
    this.setState({
      [e.target.name]: e.target.value,
    }, () => {

      let startDate = moment(this.state.startDate, "YYYY-MM-DD");
      if(!startDate.isValid()){
        return;
        //returns start date in this format startDate is valid//
      }
      let endDate = moment(this.state.endDate, "YYYY-MM-DD").startOf('day');
      if(!endDate.isValid()){
        return;
        //returns end date in this format if endDate is valid//
      }
      if(endDate.toDate() < startDate.toDate()){
        return;
        //checks whether endDate is greater than startDate
      }
      let numberOfDays = endDate.diff(startDate, 'days') + 1;
        //stores difference between start/end dates
      let days = [];
        //pushes number of days to setState below
      for(let i = 0; i < numberOfDays; i++){
        days.push({
          id: days.length,
          date: startDate.clone().add(i, "days"),
          events: [{
            time: '',
            type: '',
            summary: '',
            notes: '',
          }],
        });
      }
      //outputs the above key/values to days above
      this.setState({
        days: days,
      //grabs days from 'let days' variable on line 42
      })
    });
  }

  addNewDay(index, item) {
    index = index + 1;
    let newDay = {
      id: this.state.days.length,
      date: item.date.clone().add(1, "days"),
      events: [{
        time: '',
        type: '',
        summary: '',
        notes: '',
      }],
    };

    let daysAfter = [...this.state.days.slice(index)];
    daysAfter.forEach((oldDay) => {
      oldDay.date.add(1, 'days');
    })

    this.setState(prevState => {
      let updatedDays = [...prevState.days.slice(0, index), newDay, ...daysAfter];

        return {
          days: updatedDays
        };
      })
    }

  render(){
    return (
      <div className="itinerary-container">

          <h1 className="TripHeader-background-color">TripHeader</h1>

          <input name="startDate" type="date" value={this.state.startDate} onChange={(e) => this.onDateChange(e)}/ >
            {/* captures startDate */}
          <input name="endDate"  type="date" value={this.state.endDate} onChange={(e) => this.onDateChange(e)}/>
            {/* captures endDate */}

          <ul>
            {this.state.days.map((item, index) => (
              <li key={item.id}>
                  <DayContainer day={item} />
                  <button onClick={() => this.addNewDay(index, item)}>Add Day
                  </button>
              </li>
            ))}
          </ul>
      </div>
    )
  }
}

export default ItineraryContainer;

//DayContainer below

import React from 'react';
import './DayContainer.css';
import EventContainer from '../EventContainer/EventContainer';

class DayContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      ...props.day
    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }

      pushNewEventContainerToState(index) {
        console.log(index);
        index = index + 1;
        let newEvent = {key: this.state.events.length};

        this.setState(prevState => {
          let updatedEvents = [...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index)];

            return {
              events: updatedEvents
            };
          })
        }

  render(){
    return (
        <div className="day-container-bottom-border">
        <div>
          {this.state.date.toString()}
        </div>
        <div className="DayLabels-container">
          <h1 className="time-margins">Time</h1>
          <h1 className="activity-margins">Activity Summary</h1>
          <h1 className="notes-margins">Notes</h1>
        </div>

          <ul>
            {this.state.events.map((item, index) => (
              <li key={item.key}>
                  < EventContainer event={item} / >
              </li>
                ))}
          </ul>
        </div>
    )
  }
}

export default DayContainer;

Answer 1

感谢您编辑 <DateContainer />。不幸的是，现在有一个未定义的 <EventContainer />.

无论在何处呈现日期，都可以使用 moment 中的 format 方法来创建所需的输出。

 <ul> {this.state.days.map((item, index) => ( <li key={item.id}>{item.date.format('MMM Do YY')}</li> ))} </ul>

Moment.js |不显示预期的日期格式

Moment.js | not displaying with intended date format

javascript

reactjs

momentjs

date-range