javascript - 反应比较或匹配两个日期
问题描述
我在 React JS 中遇到了一个问题。我想做比较或start_date
匹配header date
休息 API
[
{
"id": "1",
"staff_name": "Jill",
"custom_service_name": "Jone",
"start_date": "2020-05-06 11:30:00",
"end_date": "2020-05-06 11:45:00",
},
{
"id": "2",
"staff_name": "james",
"custom_service_name": "smith",
"start_date": "2020-05-06 11:00:00",
"end_date": "2020-05-06 11:15:00",
}
]
console.log 数据:
1:00 AM //start_date
["9:43:36 AM", "9:13:36 AM", "10:13:36 AM"] //header_date
12:00 PM
["9:43:36 AM", "9:13:36 AM", "10:13:36 AM"] //header_date
2:15 AM
["9:43:36 AM", "9:13:36 AM", "10:13:36 AM"] //header_date
我的代码:
var currentdate = new Date(); //header_date logic
var prevdate = new Date();
var firstdate = new Date();
prevdate.setTime(currentdate.getTime() - (30 * 60 * 1000));
firstdate.setTime(currentdate.getTime() + (30 * 60 * 1000));
var current = currentdate.toLocaleTimeString();
var previous = prevdate.toLocaleTimeString();
var first = firstdate.toLocaleTimeString();
var headerdate = [previous ,current, first];
this.state = {
headerdate:headerdate,
appointmentdata:[]
}
componentDidMount() { //get start_date
axios.get(`http://localhost/route/v1/appointment`)
.then(res => {
const appointmentdata = res.data;
console.log(appointmentdata);
this.setState({ appointmentdata });
})
}
我试试,但这个逻辑不起作用
render() { return (
<div>
{this.state.appointmentdata.map(data =>
{ const dateTime = moment(data.start_date.toString());
if (dateTime.format("h:mm A") === this.state.headerdate)
{
return <p>{dateTime.format("h:mm A")}</p>; } //return the match date
else { return null; } })}
演示:
https://codesandbox.io/s/quizzical-browser-9e3g4
我应该怎么办?谁能帮我
解决方案
我看到你正在使用 Moment。所以你可以使用isSame
他们的内置助手来实现这一点。
文档:https ://momentjs.com/docs/#/query/is-same/
示例代码:
const isSameDate = (start_date, header_date) => {
const startDate = moment(start_date);
const headerDate = moment(header_date);
return startDate.isSame(headerDate, 'day');
}
一个小技巧,您应该将日期检查移到render
方法之外,这将使您的代码更易于阅读和维护
推荐阅读
- module - 为我们的社区 Wix 网站寻找分类广告模块
- c# - 枚举和函数
- javascript - 具有多个幻灯片功能的 Javascript 幻灯片播放器,带有幻灯片主题菜单栏,可以选择他们想看的幻灯片
- python - 运行 SPSS 频率与 R/Python 的时间长度
- xamarin.forms - 为什么在使用带有从我的 Azure Functions 应用返回的权限的 DocumentClient 时会出现未经授权的异常?
- jquery - 如何使用 AJAX 为 DataTable 传递数据
- javascript - 无法通过 nodejs 中的 fs.readFile() 读取整个文件
- php - 创建自定义选择字段 laravel 背包
- c# - 如何为 avd 命令启动 CMD.exe 并编写函数以关闭指定的 cmd.exe
- sql - 如何计算并将值插入表中,但计算取决于来自不同表的数据?