Реагировать на сравнение или сопоставление двух дат

Question

У меня проблема в React JS. Я хочу сравнить или сопоставить start_date с 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:

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

Пробую, но этот лог c не работает

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

Я вижу, вы используете Момент. Таким образом, вы можете использовать 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, что упростит чтение и сопровождение кода