how convert date format in javascript reactjs

Question

<b>Select Datetime</b><br/>
<DateTimeField onChange={this.clockevent} format={"x"}/>   

clockevent=(newDate)=>{
    var dateVal ="/Date("+newDate+")/";
    var date = new Date(parseFloat(dateVal.substr(6)));


    console.log(
    date.getFullYear() + " " +
    (date.getMonth() + 1) + "/" +
    date.getDate() + "  " +

    date.getHours() + ":" +
    date.getMinutes() + ":" +
    date.getSeconds() );
}

result :

2018/2/1 14:16:0

i want the result add day,month and ss ' format (DD MM ss) i want to this format =

2018/02/01 14:16:00

Does this answer your question? [How do I format a date in JavaScript?](https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript) — Liam, Jul 25 '22 at 11:53

score 23 · Accepted Answer · answered Feb 05 '18 at 11:41

23

I haven't found the way to format YYYY/MM/DD as you asked but I have the 2-digit format.

const today = Date.now();

console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(today));

answered Feb 05 '18 at 11:41

Rodius

2,271
14
19

That's great! Glad I helped! – Rodius Feb 05 '18 at 11:47
but result , 01.02.2018 14:48:00 i try sequential : 20180201144800 like this, is it possible? – zeaolanos Feb 05 '18 at 11:52
Format YYYY/MM/DD :: new Intl.DateTimeFormat( 'fr-ca' ).format( new Date( ) ).replace(/-/g,'/'); – stldoug Jul 01 '23 at 22:54

siva surya · Answer 2 · 2021-11-16T04:26:58.433

16

Use date-fns library

for "2018/02/01 14:16:00" this format use the following code

import { format } from 'date-fns';
console.log(format(new Date(), 'yyyy/MM/dd kk:mm:ss'))

with this you can customize your own format.

date-fns

For customizing date format use this

edited Nov 16 '21 at 04:26

answered Aug 07 '20 at 06:23

siva surya

613
7
12

1

This is the simplest and shortest way – null Oct 07 '20 at 13:57
It would be nice to add plugin link, so that viewer doesn't need to search for it. – Johnathan Awma Dec 08 '20 at 19:00

score 8 · Answer 3 · edited Oct 01 '20 at 10:08

8

I found the easiest solution for the React.js developer.

In my schema(In the backend) date format was like this.

createdAt: {
       type: Date,
       default: Date.now()
}

It will give me output as 2019-04-30T08:59:00.000Z which is (YYYY-MM-DD'T'HH:MM:SS.SSSZ) format. To change the date format in Frontend you can easily solve the problem using

1. npm install dateformat
2. import dateFormat from 'dateformat';
3. dateFormat("2019-04-30T08:59:00.000Z", "mmmm dS, yyyy") to get April 30th, 2019
or dateFormat("2019-04-30T08:59:00.000Z", "dddd, mmmm dS, yyyy") to get Tuesday, April 30th, 2019.

edited Oct 01 '20 at 10:08

fatihyildizhan

8,614
7
64
88

answered May 15 '19 at 11:52

surbhi241

81
1
2

you can add some link to see all the documentation and implementation. Thanks! – Jonathan Burgos Gio Feb 03 '22 at 21:05
https://www.npmjs.com/package/dateformat – saravana kumar ramasamy Jun 27 '22 at 08:57

score 3 · Answer 4 · answered Nov 06 '21 at 12:43

3

Just use moment and define the format as below

moment(yourDate).format("YYYY/MM/DD kk:mm:ss");

answered Nov 06 '21 at 12:43

Musadul Islam

341
3
11

Moment.js no longer maintained, please read their announcement here: https://momentjs.com/docs/#/-project-status/ – KampretLauncher Mar 11 '22 at 09:55

score 1 · Answer 5 · answered Feb 06 '18 at 06:45

  i did.  
        var dateVal ="/Date("+newDate+")/";
        var date = new Date(parseFloat(dateVal.substr(6)));
        const YYYY = date.getFullYear();
        let DD = date.getMonth()+1;
        let MM = date.getDate();
        let HH = date.getHours() ;
        let mm = date.getMinutes()
        let ss = date.getSeconds();


        if(DD<10)
        {
            DD=`0${DD}`;
        }
        if(MM<10)
        {
            MM=`0${MM}`;
        }

        if(HH<10)
        {
            HH=`0${HH}`;
        }
        if(mm<10)
        {
            mm=`0${mm}`;
        }
        if(ss<10)
        {
            ss=`0${ss}`;
        }

        const ltime= (YYYY+DD+MM+HH+mm+ss);

score 1 · Answer 6 · answered Dec 08 '18 at 08:41

You can use dateformat lib (https://github.com/felixge/node-dateformat) , it has so many options that can help you , and it's easy to use , you can use it in front-end or back-end , it worked fine for me here an example :

dateFormat(expirationdate, "yyyy-mm-dd")

score 0 · Answer 7 · answered Dec 30 '22 at 06:50

Moment JS provide control on each date string and you can easily convert into another format easily.

Install Moment Package:

npm install --save moment

Convert date format using moment:

import Moment from 'moment';
  
class App extends Component {
  constructor() {
  
    this.state = {
      dateDMY: Moment("1994-07-01").format('DD-MM-YYYY'),
      dateMDY: Moment("1994-07-01").format('MM-DD-YYYY'),
      dateYMD: Moment("01-07-1994").format('YYYY-MM-DD')
    }
  }
  
  render() {
    return (
      <div>
        <p> DMY Format: { this.state.dateDMY } </p>
        <p> MDY Format: { this.state.dateMDY } </p>
        <p> YMD Format: { this.state.dateYMD } </p>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

Output:

DMY Format: 01-07-1994
MDY Format: 07-01-1994
YMD Format: 1994-01-07

We can use https://www.npmjs.com/package/date-fns as an alternative to `moment-js` — Ankit Jindal, Jan 03 '23 at 05:12

Sudarshan Nagre · Answer 8 · 2022-07-25T11:46:41.993

-1

I used below logic, It may help you.

{new Date(your date).toLocaleString("lookup")}

edited Jul 25 '22 at 11:46

answered Jul 25 '22 at 11:45

Sudarshan Nagre

27
3

how convert date format in javascript reactjs

8 Answers8

Use date-fns library