反应比较或匹配两个日期

Question

我在 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

我该怎么办？ 谁能帮帮我

Answer 1

我看到您正在使用 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 方法之外，这将使您的代码更易于阅读和维护