Javascript formatting array of dates

Question

I have this array...

var dates = [{"date_play":"2016-08-22 00:00:00"},{"date_play":"2016-08-23 00:00:00"},{"date_play":"2016-08-24 00:00:00"}];

How can i format that date to produce like this:

var newDates = ['08-22-2016','08-23-2016','08-24-2016'];

You can also make use of moment.js for all date and time related things. — Shankar Shastri
– Shankar Shastri, Commented Sep 3, 2016 at 4:36

Makyen · Accepted Answer · 2016-09-03 04:12:11Z

Given that you already have text, you can just manipulate the text.

var dates = [{"date_play":"2016-08-22 00:00:00"},{"date_play":"2016-08-23 00:00:00"},{"date_play":"2016-08-24 00:00:00"}];

var newDates = [];
$.each(dates,function(i,obj){
    newDates.push(obj['date_play'].replace(/(\d{4})-(\d\d)-(\d\d).*$/,'$2-$3-$1'));
});
console.log(newDates);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or:

var dates = [{"date_play":"2016-08-22 00:00:00"},{"date_play":"2016-08-23 00:00:00"},{"date_play":"2016-08-24 00:00:00"}];

var newDates = [];
dates.forEach(function(obj){
    newDates.push(obj['date_play'].replace(/(\d{4})-(\d\d)-(\d\d).*$/,'$2-$3-$1'));
});
console.log(newDates);

Or:

var dates = [{"date_play":"2016-08-22 00:00:00"},{"date_play":"2016-08-23 00:00:00"},{"date_play":"2016-08-24 00:00:00"}];

var newDates = dates.map(function(obj){
    return obj['date_play'].replace(/(\d{4})-(\d\d)-(\d\d).*$/,'$2-$3-$1');
});
console.log(newDates);

Or:

var dates = [{"date_play":"2016-08-22 00:00:00"},{"date_play":"2016-08-23 00:00:00"},{"date_play":"2016-08-24 00:00:00"}];

var newDates = dates.map(function(obj){
    var tmp = obj['date_play'].split(/[- ]/,3);
    return tmp[1] + '-' + tmp[2] + '-' + tmp[0];
});
console.log(newDates);

Explaining the replace() regular expression:
The replace(), in this case, is being used with a RegExp (regular expression) which uses three capture groups to briefly hold the month, day and year, and then replace the string with just the contents of the capture groups separated by - characters, but in a different order (month-day-year).

replace(/(\d{4})-(\d\d)-(\d\d).*$/,'$2-$3-$1')
         │ ││ ││ │ │ ││ │ │ │││││    │  │  └───Replace with capture group #1 (year)
         │ │┕┯┙│ │ │ ││ │ │ │││││    │  └──────Replace with capture group #3 (day)
         │ │ │ │ │ │ ││ │ │ │││││    └─────────Replace with capture group #2 (month)
         │ │ │ │ │ │ ││ │ │ ││││└────────────── $   = The end of the string (not really needed here)
         │ │ │ │ │ │ ││ │ │ │││└─────────────── *   = Repeat the previous character, or group, 0 up to as many times as possible ( .* matches the rest of the string)
         │ │ │ │ │ │ ││ │ │ ││└──────────────── .   = Any character
         │ │ │ │ │ │ ││ │ │ │└───────────────── )   = End capture group #3 (which is 2 digits, the day)
         │ │ │ │ │ │ ││ │ │ └────────────────── \d  = A digit
         │ │ │ │ │ │ ││ │ └──────────────────── \d  = A digit
         │ │ │ │ │ │ ││ └────────────────────── (   = Begin capture group #3
         │ │ │ │ │ │ │└──────────────────────── )   = End capture group #2 (which is 2 digits, the month)
         │ │ │ │ │ │ └───────────────────────── \d  = A digit
         │ │ │ │ │ └─────────────────────────── \d  = A digit
         │ │ │ │ └───────────────────────────── (   = Begin capture group #3
         │ │ │ └─────────────────────────────── )   = End capture group #1 (which is 4 digits, the year)
         │ │ └───────────────────────────────── {4} = Repeat the previous character, or group, exactly 4 times (4 digits, the year)
         │ └─────────────────────────────────── \d  = A digit
         └───────────────────────────────────── (   = Begin capture group #1

All of the '-' characters are just '-' characters: part of the old string, or part
of the replacement.

@Jefsama, Sorry. My bad. I was still editing and added one (the forEach @ #2. I'm assuming you mean the one that is now fourth (map and split).
Yeah i edit. Just one thing, can you elaborate me whats happening in the replace ? coz i find it complicated when look hehe
@Jefsama, I have added an explanation of the regular expression being used with the replace(). Does that make it a bit more understandable?

Ish · Accepted Answer · 2016-09-03 02:35:08Z

1

Try this:

var newDates = [];
    $.each(data, function(i, item) {
       var date = new Date(item.date_play);
       newDates.push((date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear());
    })

answered Sep 3, 2016 at 2:35

Ish

2,1013 gold badges23 silver badges40 bronze badges

Comments

vol7ron · Accepted Answer · 2016-09-03 13:21:58Z

1

You don't need jQuery, or a Date parser; all you need is to break up the string.

It's important not to convert it to a date object because when you do, it'll enforce timezones and the object may even misrepresent your day (e.g., 2016-08-22 may become 8-21-2016) due to the timezone shift.

let dates = [
  {"date_play":"2016-08-22 00:00:00"},
  {"date_play":"2016-08-23 00:00:00"},
  {"date_play":"2016-08-24 00:00:00"}
];
let newDates = dates.map(obj=>{
  let dt = obj.date_play.split(' ')[0].split('-');
  return [dt[1],dt[2],dt[0]].join('-');
});

Because it looks like your data input is uniform, either adjust the source, or just rearrange your string content.

answered Sep 3, 2016 at 13:21

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

Collectives™ on Stack Overflow

Javascript formatting array of dates

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related