[英]Moment.js | not displaying with intended date format
概述
我在我的 webapp 中使用 moment.js 來允許用戶 select 一個他們假期的日期范圍。 在他們 select 所需的日期范圍(例如,11 月 1 日至 11 月 3 日)之后,應用程序為每一天呈現一個容器(在本例中為 3 個容器),以允許用戶計划每一天。 該容器中的一個 div 包含當天的日期,該日期基於所選的原始日期。
目標
我需要每天將日期格式化為“MMM-Do-YY”(19 年 11 月 11 日)。 但是,我得到的格式每天都包含更多內容:Sun Nov 10 2019 00:00:00 GMT-0500。
我試過的
我正在使用事件處理程序 function, onDateChange(見下文),我嘗試在其中提供開始日期和結束日期的格式。 onDateChange 正在由 render 方法中的兩個輸入字段更新。 在 onDateChange 設置 state 之后,我在渲染方法中有一個 ul,它映射通過 state 並為每天創建一個容器。 該容器是一個名為 DayContainer 的組件實例(該組件的代碼遠在下面)。
我對我認為錯誤的最佳猜測
我認為問題在於 DayContainer 類的渲染方法。 其中的第二個 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;
感謝您進行編輯以包含<DateContainer />
。 不幸的是,現在有一個未定義的<EventContainer />
。
無論您在哪里渲染日期,您都可以使用format方法立即創建所需的moment
。
<ul> {this.state.days.map((item, index) => ( <li key={item.id}>{item.date.format('MMM Do YY')}</li> ))} </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.