Skip to main content

Command Palette

Search for a command to run...

Formatting and Extracting Date in React

To extract Day, Month and Year using toLocalString

Updated
1 min readView as Markdown

Sample date formatting for React Javascript using toLocalString() function

Screenshot 2022-02-17 at 10.35.04 PM.png

const ExpenseDate = () => {

    const date = new Date(2021,3,12);
    const year = date.getFullYear();
    const month = date.toLocaleString('en-US', { month: 'long' });
    const day = date.toLocaleString('en-US', { day: '2-digit' });

    return (
        <div className="expense-date">
            <div className="expense-date__year">{year}</div>
            <div className="expense-date__month">{month}</div>
            <div className="expense-date__day">{day}</div>
        </div>
    );
}

More formatting information and be referred here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString