Invalid Date when i use moment-CodePudding

I have an interface that contains the card shown in the picture, and as it appears that the card contains a date, but the date is in the form:

'mm/dd/yyyy'

And I want it to be in the form:

'dd/mm/yyyy'

Knowing that I want the content inside the parentheses to remain of type "date", not string or another type.

How do I do that?

in this file i am trying to use moment but i get "Invalid Date",

date = {moment(w?.startingDate!, dateFormat).toDate()}

How can i solve my problem?

file.tsx:

import React from 'react';
import { useDrop } from 'react-dnd';
import { FormattedMessage } from 'react-intl';
import PatientCard from './PatientCard';
import { useSchedule } from './ScheduleContext';
import moment from 'moment'; 
import { dateFormat } from "../../../constants";


export default function Queue() {
    const { waitingListData, unschedule } = useSchedule();

    const [{ isOver, name }, drop] = useDrop(
        () => ({
            accept: 'card',
            // canDrop: () => content === '' || content === undefined,
            drop: (item: any) => {
                if (item.socketId === 0) return;
                unschedule(item.scheduleId);
            },
            collect: (monitor) => ({
                isOver: !!monitor.isOver(),
                name: monitor.getItem()?.name,
            }),
        }),
        [],
    );

    let StartingDate = (startingDate: string): any => {

        console.log('ssss: ', startingDate);
        let date: any = moment(startingDate).format('DD/MM/YYYY'); 
        console.log('convertToDate: ', typeof(date), date); 
        return date; 
    }

    return (
        <div ref={drop} className='queue'>
            <span style={{ position: 'absolute', left: '5px' }}>
                <FormattedMessage id='appointmentRequests' />
            </span>

            {waitingListData?.items
            // TODO: Check for ending date
                ?.filter((w) => w.endingDate === null)
                .map((w) => (
                    <PatientCard
                        from='Queue'
                        socketId={0}
                        id={w.id}
                        waitingListId={w.id}
                        key={w.id}
                        name={w.patient?.label}
                        // date={StartingDate(w?.startingDate!)}
                        date = {moment(w?.startingDate!, dateFormat).toDate()}
                        sessionState={w.sessionState}
                        priority={w.priority}
                        city={w.city}
                        supervisoryDoctor={w?.supervisoryDoctor}
                        patientId={w?.patient?.value}
                        case={w?.case}
                        />
                ))}
            {isOver && <PatientCard.Shadow name={name} />}
        </div>
    );
}

CodePudding user response：

You might be able to just do a regex replacement, assuming you have a date string:

var date = "19/11/2022";
var output = date.replace(/^(\d{2})\/(\d{2})/, "$2/$1");
console.log(output);

CodePudding user response：

try this

new Date(w.startingDate).toLocaleString('en-GB').split(',')[0]

console.log(new Date("2022-11-20T00:00:00").toLocaleString('en-GB').split(',')[0])