javascript - 从restapi数据反应比较或匹配日期

Question

我在 React JS 中遇到了一个问题。我应该如何比较或匹配header来自 rest api 的日期start_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",
}
]

组件页面：

var headerdate = ['11:00 AM', '11:30 AM', '12:00 AM'];


  this.state = {
      appointmentdata:[],      
    }
  } 

componentDidMount() {
    axios.get(`http://localhost/route/v1/appointment`)
      .then(res => {
        const appointmentdata = res.data;
        console.log(appointmentdata);
        this.setState({ appointmentdata });
      })
  }


render() {  
  return (
    <div>
         // write your compare or match dates code here 
      {this.state.appointmentdata.map(data => <p>{data.start_date}</p>) }
   </div>
  )
}

我尝试，但我无法做出逻辑

if (data.start_date === this.state.headerdate ....

预期产出

只匹配或start_date比较header日期

我应该怎么办？谁能帮我？

标签： javascriptreactjsdatedatetimecompare

Answer 1

您可以使用 Momentjs( MomentJs )

先安装npm install moment --save

将其导入import moment from "moment";您的组件中

const dateTime = moment(data.start_date.toString());
if(dateTime.format('h:mm A')===this.state.headerdate){
// your code goes here
}