A) First of all, your desired date string conversion seems to be easy (solution below) without using any package/overhead.

B) However, if you need to process it further as a JS Date Object, things become more difficult. In this case, I like to provide some useful code snippets at least which might help you depending on your usecase is or what you are aiming for.

A) CONVERSION

Seems you need a simple swap of day and month in your date string? In this case, you do not need to install and import the overhead of a package such as date-fns, moment or day.js. You can use the following function:

 const date1 = "16/07/2022"
 const date2 = "07/16/2022"

  const dateToDateFormat = (date) => {
    const obj = date.split(/\//);
    return `{obj[0]}/${obj[2]}`;
  };
  
  console.log("New date1:", dateToDateFormat(date1))
  console.log("New date2:", dateToDateFormat(date2))

B) STRING TO DATE

Are you using your date results to simply render it as string in the frontend? In this case, the following part might be less relevant. However, in case of processing them by using a JS Date Object, you should be aware of the following. Unfortunately, you will not be able to convert all of your desired date results/formats, here in this case date strings "16/07/2022" & "07/16/2022", with native or common JS methods to JS Date Objects in an easy way due to my understanding. Check and run the following code snippet to see what I mean:

const newDate1 = '07/16/2022'
const newDate2 = '16/07/2022'

const dateFormat1 = new Date(newDate1);
const dateFormat2 = new Date(newDate2);

console.log("dateFormat1", dateFormat1); 
console.log("dateFormat2", dateFormat2);

dateFormat2 with its leading 16 results in an 'invalid date'. You can receive more details about this topic in Mozilla's documentation. Furthermore, dateFormat1 can be converted to a valid date format but the result is not correct as the day is the 15th and not 16th. This is because JS works with arrays in this case and they are zero-based. This means that JavaScript starts counting from zero when it indexes an array (... without going into further details).

CHECK VALIDITY

In general, if you need to further process a date string, here "16/07/2022" or "07/16/2022", by converting it to a JS Date Object, you can in any case check if you succeed and a simple conversion with JS methods provides a valid Date format with the following function. At least you have kind of a control over the 'invalid date' problem:

const newDate1 = '07/16/2022'
const newDate2 = '16/07/2022'

const dateFormat1 = new Date(newDate1);
const dateFormat2 = new Date(newDate2);

function isDateValidFormat(date) {
  return date instanceof Date && !isNaN(date);
}

console.log("JS Date Object?", isDateValidFormat(dateFormat1));
console.log("JS Date Object?", isDateValidFormat(dateFormat2));

Now, what is the benefit? You can use this function for further processing of your date format depending on what you need it for. As I said, it will not help us too much as we still can have valid date formats but with a falsy output (15th instead of 16th).

CONVERT TO DATE OBJECT BY KNOWING THE FORMAT

The following function converts any of your provided kinds of dates ("MM/DD/YYYY" or "DD/MM/YYYY") to a valid JS Date Object and - at the same time - a correct date. However, drawback is that it assumes to know what kind of input is used; "MM/DD/YYYY" or "DD/MM/YYYY". The dilemma is, that this information is crucial. For example, JS does not know if, for example, "07/12/2022" is "MM/DD/YYYY" or "DD/MM/YYYY". It would return a wrong result.

const newDate1 = "07/16/2022"
const newDate2 = "16/07/2022"

function convertToValidDateObject(date, inputFormat) {
  const obj = date.split(/\//);
  const obj0 = Number(obj[0]) 
  const obj1 = Number(obj[1]) 
  const obj2 = obj[2]
  //
  // CHECK INPUT FORMAT
  if (inputFormat === "MM/DD/YYYY") {
    return new Date(obj2, obj0-1, obj1+1);
  } else if (inputFormat === "DD/MM/YYYY") {
    return new Date(obj2, obj1-1, obj0+1);
  } else {
    return "ERROR! Check, if your input is valid!"
  }

}

console.log("newDate1:", convertToValidDateObject(newDate1, "MM/DD/YYYY"))
console.log("newDate2:", convertToValidDateObject(newDate2, "DD/MM/YYYY"))
console.log("newDate2:", convertToValidDateObject(newDate2, "MM/YYYY"))

If the wrong format is provided as a second argument, an error is provided in the console. In practise I suggest you to use a try-catch block ( I tried here, but it does not work here in this stackoverflow editor).

I wish you good luck. Hope these information can help you.

Answer from Paul M. on Stack Overflow
🌐
GitHub
github.com › gpbl › react-day-picker › issues › 676
Question: how to format as MM/DD/YYYY without moment.js? · Issue #676 · gpbl/react-day-picker
March 22, 2018 - The placeholder shows DD/MM/YYYY, but when you select a day it changes to YYYY-D-MM. The default codesandbox already reproduces this: https://codesandbox.io/s/XDAE3x0W8 · I am using Luxon instead of moment. Is there a way to change the formatting to DD/MM/YYYY with luxon or plain JS?
Author   trevordmiller
🌐
freeCodeCamp
forum.freecodecamp.org › javascript
How to convert date to dd-mm-yyyy in react
November 19, 2020 - Hi, I am new to react (just three days) and I currently doing a project using my past experience in Jquery and ASP.NET to write the project. The challenge I am currently having now is how to convert date in JSON (2018-…
🌐
Reactshark
reactshark.com › blog › guide-react-date-format
Complete guide of Reactjs date format dd/mm/yyyy - React blog
August 28, 2021 - The most clear way to format a date (dd/mm/yyyy) or (yyyy/mm/dd) in React is to use: date-fns. Also, in this article you will learn how to format dates with just Vanilla JavaScript!
Top answer
1 of 1
1

A) First of all, your desired date string conversion seems to be easy (solution below) without using any package/overhead.

B) However, if you need to process it further as a JS Date Object, things become more difficult. In this case, I like to provide some useful code snippets at least which might help you depending on your usecase is or what you are aiming for.

A) CONVERSION

Seems you need a simple swap of day and month in your date string? In this case, you do not need to install and import the overhead of a package such as date-fns, moment or day.js. You can use the following function:

 const date1 = "16/07/2022"
 const date2 = "07/16/2022"

  const dateToDateFormat = (date) => {
    const obj = date.split(/\//);
    return `{obj[0]}/${obj[2]}`;
  };
  
  console.log("New date1:", dateToDateFormat(date1))
  console.log("New date2:", dateToDateFormat(date2))

B) STRING TO DATE

Are you using your date results to simply render it as string in the frontend? In this case, the following part might be less relevant. However, in case of processing them by using a JS Date Object, you should be aware of the following. Unfortunately, you will not be able to convert all of your desired date results/formats, here in this case date strings "16/07/2022" & "07/16/2022", with native or common JS methods to JS Date Objects in an easy way due to my understanding. Check and run the following code snippet to see what I mean:

const newDate1 = '07/16/2022'
const newDate2 = '16/07/2022'

const dateFormat1 = new Date(newDate1);
const dateFormat2 = new Date(newDate2);

console.log("dateFormat1", dateFormat1); 
console.log("dateFormat2", dateFormat2);

dateFormat2 with its leading 16 results in an 'invalid date'. You can receive more details about this topic in Mozilla's documentation. Furthermore, dateFormat1 can be converted to a valid date format but the result is not correct as the day is the 15th and not 16th. This is because JS works with arrays in this case and they are zero-based. This means that JavaScript starts counting from zero when it indexes an array (... without going into further details).

CHECK VALIDITY

In general, if you need to further process a date string, here "16/07/2022" or "07/16/2022", by converting it to a JS Date Object, you can in any case check if you succeed and a simple conversion with JS methods provides a valid Date format with the following function. At least you have kind of a control over the 'invalid date' problem:

const newDate1 = '07/16/2022'
const newDate2 = '16/07/2022'

const dateFormat1 = new Date(newDate1);
const dateFormat2 = new Date(newDate2);

function isDateValidFormat(date) {
  return date instanceof Date && !isNaN(date);
}

console.log("JS Date Object?", isDateValidFormat(dateFormat1));
console.log("JS Date Object?", isDateValidFormat(dateFormat2));

Now, what is the benefit? You can use this function for further processing of your date format depending on what you need it for. As I said, it will not help us too much as we still can have valid date formats but with a falsy output (15th instead of 16th).

CONVERT TO DATE OBJECT BY KNOWING THE FORMAT

The following function converts any of your provided kinds of dates ("MM/DD/YYYY" or "DD/MM/YYYY") to a valid JS Date Object and - at the same time - a correct date. However, drawback is that it assumes to know what kind of input is used; "MM/DD/YYYY" or "DD/MM/YYYY". The dilemma is, that this information is crucial. For example, JS does not know if, for example, "07/12/2022" is "MM/DD/YYYY" or "DD/MM/YYYY". It would return a wrong result.

const newDate1 = "07/16/2022"
const newDate2 = "16/07/2022"

function convertToValidDateObject(date, inputFormat) {
  const obj = date.split(/\//);
  const obj0 = Number(obj[0]) 
  const obj1 = Number(obj[1]) 
  const obj2 = obj[2]
  //
  // CHECK INPUT FORMAT
  if (inputFormat === "MM/DD/YYYY") {
    return new Date(obj2, obj0-1, obj1+1);
  } else if (inputFormat === "DD/MM/YYYY") {
    return new Date(obj2, obj1-1, obj0+1);
  } else {
    return "ERROR! Check, if your input is valid!"
  }

}

console.log("newDate1:", convertToValidDateObject(newDate1, "MM/DD/YYYY"))
console.log("newDate2:", convertToValidDateObject(newDate2, "DD/MM/YYYY"))
console.log("newDate2:", convertToValidDateObject(newDate2, "MM/YYYY"))

If the wrong format is provided as a second argument, an error is provided in the console. In practise I suggest you to use a try-catch block ( I tried here, but it does not work here in this stackoverflow editor).

I wish you good luck. Hope these information can help you.

🌐
ItSolutionstuff
itsolutionstuff.com › post › how-to-change-date-format-in-reactexample.html
How to Change Date Format in React? - ItSolutionstuff.com
September 6, 2020 - This article will provide example ... in react js. you can understand a concept of react convert date format example. We will look at example of how to convert date format in react. Follow bellow tutorial step of react date format yyyy mm dd to mm/dd/yyyy example. Sometimes, we need to convert our date format from component in react. so i will hel help you how you can change date format using moment ...
🌐
Byby
byby.dev › js-format-date
How to parse and format a date in JavaScript
In this tutorial, we will focus on the dd/mm/yyyy format and explore various ways to parse, format, and manipulate dates in this format using JavaScript.
🌐
ReactHustle
reacthustle.com › blog › react-format-date-ultimate-guide
Ultimate Guide: How to Format Date in React | ReactHustle
For example, for displaying a short date format like M/DD/YYYY, you can use the { dateStyle: "short" } option:
Find elsewhere
Top answer
1 of 4
7

Date is an object, you cant render it directly in ui, convert the date object to string first. You already imported moment, use the format function, try this:

import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../       actions/statistics';
import Moment from 'moment';

export default class GeneralReport extends React.Component {
    render () {
        //const { stat } = this.props;
        //console.log(this.props.stat)
        return (
            <div className = "general_report">
                <header className = "general_report_head">General Report</header>
                <div className="report_dates">
                    From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
                    To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
                </div>
                <div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
                <div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
            </div>
        );
   }
}

Reference: http://momentjs.com/

U can use the Date object method toDateString() also, try this:

<div className="report_dates">
    From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
    To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>
2 of 4
1

This should work and not give you any error.

import React, { PropTypes } from 'react';
import classnames           from 'classnames';
import Actions              from '../../actions/statistics';
import moment               from 'moment';

export default class GeneralReport extends React.Component {
  render () {
    const { stat } = this.props
    const { dateFrom, dateTo, revenue, order } = stat
    return (
      <div className="general_report">
        <header className="general_report_head">
          General Report
        </header>
        <div className="report_dates">
        From
        <span className="number">
          {moment(dateFrom).format('YYYY-MM-DD')}
        </span>
        To
        <span className="number">
          {moment(dateTo).format('YYYY-MM-DD')}
        </span>
        </div>
        <div className="report_main_result">
          Total Revenue:
        <span className="number">
          {revenue}
        </span>
        </div>
        <div className="report_main_result">
        Total orders:
        <span className="number">
          {order}
        </span>
        </div>
      </div>
    );
  }
}
🌐
Dawntraoz
dawntraoz.com › home › blog › how to format dates without moment.js
How to format dates without Moment.js - Dawntraoz
February 2, 2021 - // How it comes from my headlessCMS Storyblok const finishDate = '2021-01-31' // -- Before moment(finishDate).format('dddd, D MMMM YYYY'); // -- After new Date(finishDate).toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }) // or (equivalent with Intl) new Intl.DateTimeFormat('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }).format(new Date(finishDate))
🌐
Altcademy
altcademy.com › blog › how-to-format-datetime-in-reactjs
How to format datetime in ReactJS
July 5, 2023 - let currentDate = format(new Date(), 'MMMM do yyyy, h:mm:ss a'); console.log(currentDate); This will output the same formatted date as the Moment.js example above. Formatting dates and times in ReactJS is like cooking a meal - it requires some ...
🌐
Syncfusion
ej2.syncfusion.com › domain url › react › documentation › datepicker › date format
Date format in React Datepicker component | Syncfusion
// import the datepickercomponent import { DatePickerComponent } from '@syncfusion/ej2-react-calendars'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; export default class App extends React.Component<{}, {}> { private dateValue:Date=new Date(); public render() { return <DatePickerComponent id="datepicker" value={this.dateValue} format='yyyy-MM-dd' placeholder='Enter date' /> } }; ReactDOM.render(<App />, document.getElementById('element'));
🌐
Medium
medium.com › collaborne-engineering › format-dates-without-moment-js-b8345381126c
Format dates without moment.js
April 10, 2019 - Format dates without moment.js Use browser native function “toLocaleDateString" to format dates Lately, we encountered a hairy moment.js issue: Our development version worked fine but the …
🌐
Day.js
day.js.org › docs › en › display › format
Format · Day.js
dayjs().format() // current date in ISO8601, without fraction seconds e.g. '2020-04-02T08:02:17-05:00' dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') // 'YYYYescape 2019-01-25T00:00:00-02:00Z' dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'
🌐
Stack Overflow
stackoverflow.com › questions › 67575387 › react-js-convert-date-from-yyyy-mm-dd-to-dd-mm-yyyy
React JS Convert date from yyyy-mm-dd to dd-mm-yyyy
const minDate = new Date().toISOString().slice(0, 10) // outputs 2021-05-17 const [text, setText] = useState(''); const [urgent, setUrgent] = useState(false); const [date, setDate] = useState(minDate); const formatDate = () => { let tempDate = [...date]; let day = tempDate.slice(8); let month = tempDate.slice(5, 7); let year = tempDate.slice(0, 4); let newDate = `${day}-${month}-${year}`; return newDate; }; const handleSubmit = () => { let fixedDate = formatDate(date); console.log(newDate) // outputs 1,7-0,5-2,0,2,1 if (text.length > 5) { props.addTask(text, urgent, fixedDate); setText(''); setUrgent(false); setDate(minDate); } else alert('Task name too short!'); };
🌐
W3Schools
w3schools.com › js › js_date_formats.asp
JavaScript Date Formats
JS Examples JS HTML DOM JS HTML Input JS HTML Objects JS HTML Events JS Browser JS Editor JS Exercises JS Quiz JS Website JS Syllabus JS Study Plan JS Interview Prep JS Bootcamp JS Certificate JS Reference ... The ISO format follows a strict standard in JavaScript. The other formats are not so well defined and might be browser specific. Independent of input format, JavaScript will (by default) output dates in full text string format: ISO 8601 is the international standard for the representation of dates and times. The ISO 8601 syntax (YYYY-MM-DD) is also the preferred JavaScript date format:
🌐
LogRocket
blog.logrocket.com › home › how to format dates in javascript: methods, libraries, and best practices
How to format dates in JavaScript: Methods, libraries, and best practices - LogRocket Blog
May 8, 2025 - It was explicitly designed to address Moment’s shortcomings while maintaining a similar API, making it an excellent choice for migration projects. Here’s an example demonstrating how to set up Day.js with useful plugins for working with timezones, custom formats, and locales.
🌐
Medium
learningleadooo.medium.com › how-to-format-date-as-yyyy-mm-dd-in-react-1da00ce42340
How to Format Date as YYYY-MM-DD in React | by Learning Lead | Medium
October 11, 2022 - How to Format Date as YYYY-MM-DD in React Format date as YYYY-MM-DD in React To format the date as YYYY-MM-DD : Convert the date to ISO format using the toISOString() method on the date object. Split …
🌐
GitHub
github.com › Hacker0x01 › react-datepicker › issues › 638
Date format not supporting 'DD-MM-YYYY' · Issue #638 · Hacker0x01/react-datepicker
September 16, 2016 - <DatePicker {...input} dateFormat="DD/MM/YYYY" className="form-control" fixedHeight selected={selectedDate} isClearable={true} showYearDropdown />
Author   syam1123
🌐
CoreUI
coreui.io › answers › how-to-format-date-as-yyyy-mm-dd-in-javascript
How to format date as YYYY-MM-DD in JavaScript · CoreUI
September 30, 2025 - Format dates as YYYY-MM-DD using toISOString().split(“T”)[0] - the most reliable method for ISO date format in JavaScript.