Date conversion in react js

Question

I want to display dates (range of dates). The format of dates coming from DB seperated by hyphen is

Sep 21, 2017 - Sep 29, 2017

I want to convert it to the format

09/21/2017 - 09/25/2017

How can I convert this?

The two dates are coming in a single field from Db seperated by a hyphen. — Jane Fred
– Jane Fred, Commented Sep 20, 2019 at 4:52
Please post your code so far and detail exactly what isn't working — Gricey
– Gricey, Commented Sep 20, 2019 at 4:54

Roger · Accepted Answer · 2019-09-20 05:19:18Z

3

You can use this function that converts to your format: Your CodeSand

const convert = dateRange =>
    dateRange.split(" - ")
        .map(date => new Intl.DateTimeFormat('en-US').format(new Date(date)))
        .join(" - ")

console.log(convert("Sep 21, 2017 - Sep 29, 2017"));

The code below works and uses only pure JavaScript ES6.

edited Sep 20, 2019 at 5:19

answered Sep 20, 2019 at 5:06

Roger

1,6613 gold badges30 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

swapnesh · Accepted Answer · 2019-09-20 05:00:46Z

2

You can use Intl.DateTimeFormat object.

const dbDate = new Date("Sep 21, 2017")

console.log(new Intl.DateTimeFormat('en-US').format(dbDate))

From the MDN Docs -

The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

Edit - If you are getting both dates in an single string you can split() it out and then apply the above method and concatenate (based on your requirement).

edited Sep 20, 2019 at 5:00

answered Sep 20, 2019 at 4:57

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

2 Comments

Medet Tleukabiluly Over a year ago

never knew about Intl, +1

swapnesh Over a year ago

JS is so vaaaaaast :)

Makdia Hussain · Accepted Answer · 2019-09-20 05:39:37Z

2

ReactJS have it's own date library which is moment date library. It can Parse, validate, manipulate, and display dates and times in JavaScript.

So use npm to install react-moment along with its peer dependency, moment by running this command :

npm install moment

Then Import and use in your Typescript file

import * as moment from 'moment';
const date = moment("Sep 21, 2017").format('MM/DD/YYYY');
console.log(date); // 09/21/2017

edited Sep 20, 2019 at 5:39

answered Sep 20, 2019 at 5:34

Makdia Hussain

7623 silver badges11 bronze badges

Comments

rawk · Accepted Answer · 2019-09-20 05:00:17Z

0

Moment.js mentioned in your comments has helped me a lot with the situation, specifically for what you want to do is found here

And moment.js package for reactjs can be installed from here

this will definitely help with your formating issue

answered Sep 20, 2019 at 5:00

rawk

1105 bronze badges

Comments

lukeskywaka · Accepted Answer · 2019-09-20 05:02:24Z

const date = "Sep 21, 2017 - Sep 29, 2017"


const dateConvertor = date => {


    const splited = date.split(" ")

    const dateItems = []
    splited.forEach((item,index) => {
            if(item.indexOf(",") === -1) {
                dateItems.push(item)
            } else {
                dateItems.push(item.slice(0,item.indexOf(",")))
            }
     })

     let convertedDate = "";

     dateItems.forEach((item,index) => {
        if(index === 1 || index === 5) {
            convertedDate += "/"+item+"/"
        } else if (index === 3) {
            convertedDate += " "+ item + " "
        } else {
            convertedDate += item
        }
    })

    return convertedDate
}


dateConvertor(date)

alou · Accepted Answer · 2019-09-20 05:50:01Z

First separate the string so that you can use it:

const [from, to] = '09/21/2017 - 09/25/2017'.split(' - ');

This will give you 2 strings, not formatted as you want so you will need to do some further transformation (assuming momentjs is available):

const [from, to] = '09/21/2017 - 09/25/2017'.split(' - ').map(item => 
moment(item).format('DD-MM-YYYY'));

If a slight format difference is OK, you might not need moment and use it like this

const [from, to] = '09/21/2017 - 09/25/2017'.split(' - ').map(item => 
new Intl.DateTimeFormat('en-US').format(new Date(item), {month: "2-digit", day: "2-digit"}));

NOTE: I am using 2-digit param here, which is supposed to provide the date / month as mentioned (09 instead of 9) but there seems to be an issue with that at least in some browsers.

Some explanation if not obvious: The split part, creates an array. The map part, will transform the 2 strings to formatted date objects. The first part (left of the =) is destructuring the array and giving you the variables to use.

Collectives™ on Stack Overflow

Date conversion in react js

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related