How to format full local date into simple mm/dd/yyyy?

Question

Need to format this date:

[Wed Jul 03 2019 00:00:00 GMT+0200 (Central European Summer Time), Thu Aug 01 2019 23:59:59 GMT+0200 (Central European Summer Time)]

Into simple mm/dd/yyyy, but not with moment. Cus moment is to heavy.

This is my format function which get array date = [startDate, endDate]

 formatDate = (date) => {
    const newDate = new Date(date);
    const dateFormatted = [];
    for (let i = 0; i < date.length; i++) {
      dateFormatted[i] = `${newDate.getMonth() + 1}/${newDate.getDate()}/${newDate.getFullYear()}`;
    }

    return dateFormatted;
  };

As result I am getting this NaN/NaN/NaN

Any suggestion, advice?

is date suppose to be executed as a function? I see: `date()` which doesnt quite make sense to me. Is it a function as the variable definition doesnt really give hint to the type, but at the same time another variable with the same name is an array. — Fallenreaper, Jul 18 '19 at 13:43
Is the date supposed to be displayed in html? Then you could use the date pipe. {{ myDateObj | date: 'MM/dd/yyyy' }} — Dwagh, Jul 18 '19 at 13:50

score 2 · Answer 1 · answered Jul 18 '19 at 13:46

I recommend you to not customize your Date variables it in that way,

You should define your LOCALE_ID which means that you don't need to use custom format for your Date (or currency, time etc.) variables. For example,

import { LOCALE_ID } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
});

Source: https://angular.io/api/core/LOCALE_ID#description

score 1 · Answer 2 · answered Jul 18 '19 at 13:51

1

Simple js function to convert Date object to string:

const date = new Date();
function tommddyyyy(date) {
  return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
}
console.log(tommddyyyy(date));

answered Jul 18 '19 at 13:51

Vaibhav Vishal

4,555
6
22
37

Already try with that apporoch and as result get this: `NaN/NaN/NaN` – James Delaney Jul 18 '19 at 13:54
I don't think so. – Vaibhav Vishal Jul 19 '19 at 05:25
Read my question again. – James Delaney Jul 19 '19 at 08:30

score 1 · Accepted Answer · answered Jul 18 '19 at 13:57

So, the result you want is something like:

`${d.getMonth().toString().padStart(2,'0')}/${d.getDate().toString().padStart(2,'0')}/${d.getFullYear()}`

So your function should be:

let formatDate = (date) => {
    let d = new Date(date)
    return `${d.getMonth().toString().padStart(2,'0')}/${d.getDate().toString().padStart(2,'0')}/${d.getFullYear()}`;
}

and then you can call it on a list of dates.

let dateList = [new Date(), new Date()]
formattedDates = dateList.map(formatDate)

You can also extend this to take a list of dates to process.

let formatDates = (dates) => dates.map(formatDate);

so you can also pass in a list of dates to process, leveraging the singular formatDate

That is solution, thank you very much! : ) – James Delaney Jul 18 '19 at 14:07 — James Delaney, Jul 18 '19 at 14:07
No problem. Have a great day. – Fallenreaper Jul 18 '19 at 14:08 — Fallenreaper, Jul 18 '19 at 14:08

score 1 · Answer 4 · answered Jul 18 '19 at 22:24

The posted code doesn't produce NaN/NaN/NaN, it formats the date as m/d/y.

Your problem is here:

 for (let i = 0; i < date.length; i++)

The value of date is a string like "Wed Jul 03 2019 00:00:00 GMT+0200" with length 33, so you get 33 formatted dates. There are already many questions on parsing and formatting dates, so I'll mark this as a duplicate of those.

score 0 · Answer 5 · answered Jul 18 '19 at 13:51

0

angular has it's own formatDate function, I'd recommend using it:

import {formatDate} from '@angular/core';

formatDate(date, 'short', 'en-US');

1st arg is date or string, second is format (or shorthand format as used here), 3rd is the locale.

answered Jul 18 '19 at 13:51

bryan60

22,247
3
31
47

The question is tagged with Reactjs, not Angular. – Daniel Beck Jul 18 '19 at 13:58
@DanielBeck not when I answered it – bryan60 Jul 18 '19 at 14:09
I see what you mean. Apologies. – Daniel Beck Jul 19 '19 at 01:49

score 0 · Answer 6 · answered Jul 18 '19 at 14:08

0

I expect date_arr to be an array of strings parsable as dates. Then I would use this plain javascript solution:

formatDate = (date_arr) => {
    return date_arr.map( dt => {
        // create an date object and convert to an iso-string (yyyy-mm-dd)
        var iso = new Date(dt).toISOString().substr(0,10);
        // rearrange the values as needed (mm-dd-yyyy)
        iso = `${iso.substr(5)}-${iso.substr(0,4)}`;
        // replace delimiter '-' with '/'
        return iso.replace(/-/g, '/');}
    );
};

// sample call
formatDate(['2019-05-03', new Date()]);

// ["05/03/2019", "07/18/2019"]

answered Jul 18 '19 at 14:08

kwrl

643
7
12

This changes the timezone, so will give the wrong date for the period of the timezone offset at the start or end of the day. – RobG Jul 18 '19 at 22:17
I think of only dates for this function (without time) so this should work as expected. – kwrl Jul 20 '19 at 10:34

How to format full local date into simple mm/dd/yyyy?

6 Answers6