反应比较或匹配两个日期

Question

I am facing an issue in React JS. I want to do compare or match the start_date with header date

Rest 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 data:

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

My Code:

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 });
      })
  }

I try, but this logic is not working

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; } })} 

Demo:

https://codesandbox.io/s/quizzical-browser-9e3g4

What should i do? Can anyone help me

Answer 1

I see you're using Moment. So you can use isSame built-in helper from them to achieve this.

Docs: https://momentjs.com/docs/#/query/is-same/

Example code:

const isSameDate = (start_date, header_date) => {
  const startDate = moment(start_date);
  const headerDate = moment(header_date);

  return startDate.isSame(headerDate, 'day');
}

One small tip, you should move the date checking outside the render method, that would makes your code easier to read and maintainable