I am getting date data in this format from my API:

"2018-12-26T05:00:29"

however I need to display this in the application front end in a different format like this:

"Monday, Nov 26 at 10:00 am"

How can I achieve this in react-native?

I am getting date data in this format from my API:

"2018-12-26T05:00:29"

however I need to display this in the application front end in a different format like this:

"Monday, Nov 26 at 10:00 am"

How can I achieve this in react-native?

• javascript
• date
• react-native

2 Answers 2

Consider using a third-party library like momentjs for advanced date parsing and formatting. Using moment, you can format the date string as required via the following pattern:

// dddd for full week day, MMM for abreviated month, DD for date, etc
moment(inputDate).format("dddd, MMM DD at HH:mm a")

The momentjs library works well with react-native and can be easily installed by:

npm install moment --save

and imported into your project:

import moment from 'moment';

Here's a snippet demonstrating the pattern shown above:

var inputDate = "2018-12-26T05:00:29";

var outputDate = moment(inputDate).format("dddd, MMM DD at HH:mm a");

console.log(outputDate);

<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.23.0/moment.min.js"></script>

While Moment.js can resolve this issue quickly, it's however a pretty big library to use for a single use case. I remend using date-fns instead. It's lite.

I e out of this thanks to https://github./date-fns/date-fns/issues/376#issuement-353871093.

Despite the solution, I did some perfection on Date Field Symbol. You may need to use dd instead of DD / yyyy instead of YYYY for formatting days of the month / for formatting years.

Read the doc here: https://github./date-fns/date-fns/blob/master/docs/unicodeTokens.md