- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
概述
我在我的网络应用程序中使用 moment.js 来允许用户选择假期的日期范围。选择所需的日期范围(例如 11 月 1 日到 11 月 3 日)后,应用程序会为每天呈现一个容器(在本例中为 3 个容器),以便用户计划每一天。该容器中的一个 div 保存当天的日期,该日期基于所选的原始日期。
目标
我需要每天将日期格式化为“MMM-Do-YY”(2019 年 11 月 11 日)。但是,我得到的格式包含每天的更多内容:Sun Nov 10 2019 00:00:00 GMT-0500。
我尝试过的
我正在使用事件处理函数 onDateChange(见下文),我尝试在其中提供开始日期和结束日期的格式。 onDateChange 正在由渲染方法中的两个输入字段进行更新。 onDateChange 设置状态后,我在 render 方法中有一个 ul,它映射状态并为每一天创建一个容器。该容器是一个名为 DayContainer 的组件实例(该组件的代码远在下面)。
我对错误的最佳猜测
我认为问题出在 DayContainer 类的 render 方法中。其中的第二个 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>
关于javascript - Moment.js |不以预期的日期格式显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58840061/
有没有办法使用 Clojure format(基于 java.util.Formatter)或 cl-format(基于 Common Lisp 的format) 以编程方式设置空格填充?如果您事先知
我正在尝试创建一个用户实体以及数据/文件(pdf格式)。上传并保存到数据库很好,但是当我让用户进入 postman 时尝试发送获取请求方法,然后在数据字段中显示一些糟糕的数据,而且我无法在数据库中看到
我必须将值为 {"STX","ETX"} 的普通字符串数组转换为十六进制值,并且我应该根据 http://www.asciitable.com/ 得到 {2,3} . 最佳答案 听起来你想要一个 Ma
我想格式化我的代码,但不确定哪种格式类型最适合我的项目需要。 我发现仅对于 dart 和 flutter 项目(我都有),有不止一个选项可用于格式化编程语言/框架中预先构建的代码。 Dart : da
我已经尝试了多个代码,例如这样 Sub DateFixer() Application.ScreenUpdating = False Application.Calculation =
SolrQuery query = new SolrQuery(); query.setQuery("*:*"); query.add("wt","csv"); server.query(query)
我有一个包含多个字符串的数据库,我从查询中获取了这些记录,并且我在 QString 中收到了这种格式的数据: "Mon, 13 Nov 2017 09:48:45 +0000" 所以,我需要根据文化来
我有一个 Delphi 2007 DBGrid,我想让用户以更新的 Excel 格式 (OOXML) 保存它,但我的标准是用户不需要安装 Excel。有没有人知道任何已经这样做的组件?是的,我已经搜索
我正在我们的普通 html 站点旁边创建一个移动站点。使用 rails 3.1。移动站点在子域 m.site.com 中访问。 我已经定义了移动格式(Mime::Type.register_alias
我正在尝试使用 xmlstarlet 格式化 xml 文件,但我不想创建新的 xml 文件。 我试过了 xmlstarlet fo --inplace --indent-tab --omit-decl
我在 A 列中有一个带有文本的电子表格。 例如 A1=MY TEXT1 A2=MY TEXT2 A3=MY TEXT3 A4=MY TEXT4 A5=MY TEXT5 我想在文本的前后添加撇号 结果是
我想做一些源代码转换(自动导入列表清理),我想保留注释和格式。我听说过一些关于解析器这样做的事情,我认为是 ghc 解析器。 看起来我可以通过从文件中提取内容来使用 hs-src-exts Langu
我在 Excel 中工作,我想根据另一张表中的列表找出一张表中是否有匹配项。 我已将值粘贴到列表中,并希望从另一张表中返回它们的相应值。包含字母和数字的单元格可以正常工作(例如:D5765000),但
我有一个 DurationField在我的模型中定义为 day0 = models.DurationField('Duration for Monday', default=datetime.time
我正在为我的应用程序开发 WMI 查询。它需要为给定的 VID/PID 找到分配的虚拟 COM 端口。使用 WMI Code Creator 我发现...... 命名空间:root\CIMV2 类:W
我试图弄清楚如何使用 NSTextList,但除了 this SO question 之外,在网上几乎没有找到有用的信息。和 the comment in this blog . 使用这个我已经能够创
我要查询all_objects表在哪里last_ddl_time='01 jan 2010'但它拒绝日期格式... 任何机构给我查询的确切格式? 最佳答案 正如 AKF 所说,您应该使用 Trunc除
我试图在我的应用程序中实现聊天功能。我使用了 2 个 JEditorPane。一个用于保存聊天记录,另一个用于将聊天发送到前一个 JEditorPane。 JEditorPane 是 text/h
我在大学里修了一个编译器类(class),内容非常丰富,很有趣,尽管也很多工作。既然给了我们要实现的语言规范,所以我学不到的一件事就是语言设计。我现在正在考虑创建一种有趣的简单玩具语言,以便我可以玩耍
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic
我是一名优秀的程序员,十分优秀!