[英]react js date format with moment
enter code here enter code here在此处输入代码 在此处输入代码
var start_date = ["2020-05-07 18:30:00"]; var header_date_array = ["2020-05-07 12:59:12 PM", "2020-05-07 14:29:12 PM", "2020-05-07 18:30:00 PM", "2020-05-07 20:29:12 PM"]; //match or compare date with same format //what i should i do? //this is my logic, but it is not working const isSameDate = (start_date, header_date) => { const startDate = moment(start_date); const headerDate = moment(header_date_array); return startDate.isSame(headerDate, 'day'); } console.log(isSameDate);
I have facing an issue in React js.我在 React js 中遇到了一个问题。 I want to compare/match the two dates start_end
or header_date
and shows on render component page.我想比较/匹配两个日期start_end
或header_date
并显示在渲染组件页面上。
My code example:我的代码示例:
{this.state.appointmentdata.map(data =>
{ const dateTime = moment(data.start_date.toString()); //start_date
const headerDate = moment(this.state.headerdatearray); //header_date
return headerDate.isSame(dateTime, 'day');
})
}
console.log data (Date Format ) console.log 数据(日期格式)
start_date: 2020-05-07 02:15:00 //format: "YYYY-MM-DD HH:mm:ss"
header_date array: ["11:57:16 AM", "11:27:16 AM"]
But the date format are different.但是日期格式不同。 how can i get same date with same format?我怎样才能以相同的格式获得相同的日期?
anyone help me?有人帮我吗?
The header dates are an array, so you likely want to iterate over it, constructing a luxon DateTime
object for each, and check if it has the same second
as the specified start date. header 日期是一个数组,因此您可能希望对其进行迭代,为每个日期构造一个 luxon DateTime
object,并检查它是否与指定的开始日期具有相同的second
。 Checking seconds
unit includes all larger units, ie same minute, hour, day, week, etc... As long as some header date has the same then return true.检查seconds
单位包括所有较大的单位,即相同的分钟、小时、日、周等……只要某些header 日期相同,则返回 true。
Edit: I couldn't get formatting to work as expected using momenjs
, and since you sounded open to alternative suggestions, IMO luxon
is a better utility for handling DateTime objects (it's made by the same organization, btw)编辑:我无法使用momenjs
使格式化按预期工作,并且由于您听起来对替代建议持开放态度,IMO luxon
是处理 DateTime 对象的更好实用程序(它是由同一组织制作的,顺便说一句)
const isSameDate = (start_date, header_date_array) => {
const startDate = DateTime.fromFormat(start_date, 'yyyy-MM-dd HH:mm:ss');
return header_date_array.some(header_date => {
const headerDate = DateTime.fromFormat(header_date, 'yyyy-MM-dd hh:mm:ss a');
return startDate.hasSame(headerDate, "second");
});
};
Given header date array and appointment data:给定 header 日期数组和约会数据:
const header_date_array = [
"2020-05-07 12:59:12 PM",
"2020-05-07 14:29:12 PM",
"2020-05-07 18:30:00 PM",
"2020-05-07 20:29:12 PM"
];
const appointmentData = [
{
start_date: "2020-05-07 18:30:00"
},
{
start_date: "2020-05-07 09:30:00"
},
{
start_date: "2020-05-08 18:30:00"
},
{
start_date: "2020-05-08 09:30:00"
}
];
Map as such Map 本身
appointmentData.map(({ start_date }) =>
isSameDate(start_date, header_date_array)
)
[true, false, false, false]
As per your current code structure, I tried out as below:根据您当前的代码结构,我尝试如下:
var start_date = ["2020-05-07 18:30:00"];
var header_date_array = ["2020-05-07 12:59:12 PM", "2020-05-07 14:29:12 PM", "2020-05-07 18:30:00 PM", "2020-05-07 20:29:12
PM"];
If start_date is array,如果 start_date 是数组,
this.start_date.map(start_date => {
this.isSameDate(start_date, this.header_date_array);
console.log(this.isSameDate(start_date, this.header_date_array));
})
const isSameDate = (start_date, header_date) => {
const startDate = [moment.utc(start_date).format('L'), moment.utc(start_date).format('LTS')].join(' '); // You can replace LTS with LT to eliminate seconds.
let flag;
header_date.map(d => {
d = d.substring(0, d.indexOf("PM")); // if I don't remove "PM", then moment says invalid Date. I have not dug in-depth to find reason.
const headerDate = [moment.utc(d).format('L'), moment.utc(d).format('LTS')].join(' '); //Again here You can replace LTS with LT to eliminate seconds.
startDate == headerDate ? flag = headerDate : flag = 'no appointment logged';
})
return flag; // you can use 'start_date' in order to return date instead.
}
There can be multiple options for this:为此可以有多种选择:
Run This command in the terminal:在终端中运行此命令:
npm install moment --save
Usage in React js Component: React js 组件中的用法:
import Moment from 'moment';
render(){
Moment.locale('en');
var dt = '2020-05-07T02:15:00';
return(<View> {Moment(dt).format('d MMM')} </View>)
}
You may check the moment.js official docs here https://momentjs.com/docs/您可以在此处查看 moment.js 官方文档https://momentjs.com/docs/
Or you can use this package或者你可以使用这个 package
npm install date-fns --save
Usage in Code:代码中的用法:
import { format } from "date-fns";
var date = new Date("2020-05-07 02:15:00");
var formattedDate = format(date, "MMMM Do, YYYY H:mma");
console.log(formattedDate);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.