react js date format with moment

Question

enter code here enter code here

 var start_date = ["2020-05-07 18:30:00"]; var header_date_array =  ["2020-05-07 12:59:12 PM", "2020-05-07 14:29:12 PM", "2020-05-07 18:30:00 PM", "2020-05-07 20:29:12 PM"]; //match or compare date with same format //what i should i do? //this is my logic, but it is not working const isSameDate = (start_date, header_date) => { const startDate = moment(start_date); const headerDate = moment(header_date_array); return startDate.isSame(headerDate, 'day'); } console.log(isSameDate);

I have facing an issue in React js. I want to compare/match the two dates start_end or header_date and shows on render component page.

My code example:

          {this.state.appointmentdata.map(data => 
              { const dateTime = moment(data.start_date.toString()); //start_date
                const headerDate = moment(this.state.headerdatearray);    //header_date
                return headerDate.isSame(dateTime, 'day');
            })
          }

console.log data (Date Format )

start_date: 2020-05-07 02:15:00     //format: "YYYY-MM-DD HH:mm:ss"

header_date array: ["11:57:16 AM", "11:27:16 AM"] 

But the date format are different. how can i get same date with same format?

anyone help me?

Answer 1

The header dates are an array, so you likely want to iterate over it, constructing a luxon DateTime object for each, and check if it has the same second as the specified start date. Checking seconds unit includes all larger units, ie same minute, hour, day, week, etc... As long as some header date has the same then return true.

Edit: I couldn't get formatting to work as expected using momenjs , and since you sounded open to alternative suggestions, IMO luxon is a better utility for handling DateTime objects (it's made by the same organization, btw)

const isSameDate = (start_date, header_date_array) => {
  const startDate = DateTime.fromFormat(start_date, 'yyyy-MM-dd HH:mm:ss');
  return header_date_array.some(header_date => {
    const headerDate = DateTime.fromFormat(header_date, 'yyyy-MM-dd hh:mm:ss a');
    return startDate.hasSame(headerDate, "second");
  });
};

Given header date array and appointment data:

const header_date_array = [
  "2020-05-07 12:59:12 PM",
  "2020-05-07 14:29:12 PM",
  "2020-05-07 18:30:00 PM",
  "2020-05-07 20:29:12 PM"
];

const appointmentData = [
  {
    start_date: "2020-05-07 18:30:00"
  },
  {
    start_date: "2020-05-07 09:30:00"
  },
  {
    start_date: "2020-05-08 18:30:00"
  },
  {
    start_date: "2020-05-08 09:30:00"
  }
];

Map as such

appointmentData.map(({ start_date }) =>
  isSameDate(start_date, header_date_array)
)

[true, false, false, false]

Answer 2

As per your current code structure, I tried out as below:

var start_date = ["2020-05-07 18:30:00"];
var header_date_array =  ["2020-05-07 12:59:12 PM", "2020-05-07 14:29:12 PM", "2020-05-07 18:30:00 PM", "2020-05-07 20:29:12 
PM"];

If start_date is array,

this.start_date.map(start_date => {
  this.isSameDate(start_date, this.header_date_array);
  console.log(this.isSameDate(start_date, this.header_date_array));
})

const isSameDate = (start_date, header_date) => {
  const startDate = [moment.utc(start_date).format('L'), moment.utc(start_date).format('LTS')].join(' '); // You can replace LTS with LT to eliminate seconds.
  let flag;
  header_date.map(d => {
    d = d.substring(0, d.indexOf("PM")); // if I don't remove "PM", then moment says invalid Date. I have not dug in-depth to find reason.
    const headerDate = [moment.utc(d).format('L'), moment.utc(d).format('LTS')].join(' '); //Again here You can replace LTS with LT to eliminate seconds.
    startDate == headerDate ? flag = headerDate : flag = 'no appointment logged';
  })
  return flag; // you can use 'start_date' in order to return date instead.
}

Answer 3

There can be multiple options for this:

Run This command in the terminal:

npm install moment --save

Usage in React js Component:

import Moment from 'moment';

render(){
    Moment.locale('en');
    var dt = '2020-05-07T02:15:00';
    return(<View> {Moment(dt).format('d MMM')} </View>)
}

You may check the moment.js official docs here https://momentjs.com/docs/

Or you can use this package

npm install date-fns --save

Usage in Code:

import { format } from "date-fns";

var date = new Date("2020-05-07 02:15:00");

var formattedDate = format(date, "MMMM Do, YYYY H:mma");

console.log(formattedDate);