How do i convert "2016-03-10 16:00:00.0" to March 10,2016 in JavaScript?

Question

I'm getting a date string which i need to convert into other date format in the javascript.

Input Date String : 2016-03-10 16:00:00.0
Expected Output : March 10,2016

use http://momentjs.com/ for manipulate date. It is a very great lib — Alexandre, Feb 25 '16 at 23:16
what do you have so far? what part of your code isn't working? SO is not a code-writing service. — user428517, Feb 25 '16 at 23:23
@user5970552—do not use the Date constructor to parse strings, it is unreliable and not recommended. Simply parse the string, rearrange the date parts and replace the month number with its name. 3 lines of code max. — RobG, Feb 26 '16 at 02:31
@John Slegers, Thanks a ton for your help. I am not sure about hard code the locale, so i need to reconfirm my requirement on this front. Is there any way we can pass the locale automatically by reading user's settings? I am just curious :) Thanks again for your detailed help. Really appreciated. — user5970552, Feb 26 '16 at 14:26
@RobG, I am not familiar with JavaScript Date Parsing Techniques, if possible, can you give me that 3 line of code which you have referred. I will that option as well. Thanks in advance. — user5970552, Feb 26 '16 at 14:27
@user5970552 : Any code I post here on StackOverflow is free to use by anyone. So yeah, you can take the code from my answer and play around with it. And with respect to determining the browser's locale, you should be able to find a technique that works for you at http://stackoverflow.com/questions/673905/best-way-to-determine-users-locale-within-browser — John Slegers, Feb 26 '16 at 18:14
@user5970552 : I just updated my answer with a second version that has better browser support. — John Slegers, Feb 26 '16 at 18:57
@user5970552—`var m = ['January','February','March']; var b = s.split(/\D/); var d = m[b[1]-1] + ' ' + b[2] + ' , ' + b[0];` where *s* is the date string and *m* is a full array of month names (truncated here for convenience). No need for a Date or library and will work in every implementation ever. — RobG, Feb 26 '16 at 21:57
Thank you RobG for your great insight on this issue. Very much appreciated for your help. — user5970552, Feb 29 '16 at 15:28

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

All browsers

The most reliable way to format a date with the source format you're using, is to apply the following steps :

Use .replace(/ /g,'T') to convert your date to ISO 8601
Use that as input for new Date()
Use .getDate(), .getMonth() and .getFullYear() to get respectively the day, month and year
Paste the pieces together according to your target format

The format function below shows you the optimal way to combine those four steps :

var date = '2016-03-10 16:00:00.0';

function format(input) {
    var date = new Date(input.replace(/ /g,'T'));
    return [
        "January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December"
    ][date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
}

document.body.innerHTML = format(date); // OUTPUT : "March 10, 2016"

(See also this Fiddle).

Modern browsers only

You can also use the built-in .toLocaleDateString method to do the formatting for you. You just need pass along the proper locale and options to match the right format, which unfortunately is only supported by modern browsers (*) :

var date = '2016-03-10 16:00:00.0';

function format(input) {
    var dateFormat = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(input.replace(/ /g,'T')).toLocaleDateString('en-US', dateFormat);
}

document.body.innerHTML = format(date); // OUTPUT : "March 10, 2016"

(See also this Fiddle).

(*) According to the MDN, "Modern browsers" means Chrome 24+, Firefox 29+, IE11, Edge12+, Opera 15+ & Safari nightly build

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 26 '16 at 00:23

John Slegers

45,213
22
199
169

Firstly, using the Date constructor to parse that string will result in one of 3 different outcomes depending on the browser. Secondly, the output of *toLocaleDateString* is entirely implementation dependent. So this answer will certainly fail in many (most?) cases. – RobG Feb 26 '16 at 02:26
@RobG : The output of `toLocaleDateString` without explicitly defining locale and other settings seems to be implementation dependent, but I can't imagine this to be the case when you explicitly set the locale and other options. If you know this to be wrong, I'd love to see some sources on that. Anyway, you were definitely right about `Date` producing inconsistent output across browsers. In the updated version of my answer, I converted the timestring to `ISO 8601`, which should fix that issue. – John Slegers Feb 26 '16 at 09:53
There are plenty of browsers in use that do not support the Intl object, such as IE<11 and Safari, so those browsers at least will ignore any arguments to *toLocaleString*. The use of "locale" to describe "en-us" is a misnomer (not your fault but the specification writers'): "en" is an abbreviation for English, which is a language and "us" is short for USA, which is a country and means "English as spoken by Americans", wherever they are. Previously such settings were called "culture", probably a better expression but still not great. Whatever happened to "preferences" or just "settings"? ;-) – RobG Feb 26 '16 at 15:45
@RobG : You raise some valid points. To address those points, I just added another version of the `format` function that that should also work in IE<11 and Safari. – John Slegers Feb 26 '16 at 18:49
Great, but you don't need to convert it to a Date at all: you input the year, month and day just to call them back out again! Just convert the month number to name and use the year and day as is (or use `+day` to remove leading zeros). Less code, works everywhere. ;-) – RobG Feb 27 '16 at 01:04
@RobG : `2016-03-10 16:00:00.0` is the source format. Sure, you can always parse it into day, month and year yourself... but why would anyone do that when `new Date(input.replace(/ /g,'T'))` is all it takes to convert it into a `Date` object?! – John Slegers Feb 28 '16 at 12:28
Because not all browsers in use will parse it. Also, "2016-03-10" will be treated as UTC (except for some versions of recent browsers) but "2016-03-10T16:00:00.0" as local, which might be surprising. So 1 extra line of code to ensure compatibility with all implementations seems like a good idea to me. The *g* flag is redundant, there should only be one. Replacing more than one space with a T will result in a non–compliant string and likely an invalid Date. – RobG Feb 28 '16 at 21:14

score 0 · Answer 2 · answered Feb 25 '16 at 23:46

https://msdn.microsoft.com/en-us/library/ff743760(v=vs.94).aspx

https://msdn.microsoft.com/en-us/library/az4se3k1(v=vs.110).aspx

These two links ought to get you started in the right direction.

You could do something like var myDate = new Date("2016-03-10 16:00:00.0"); myDate.toString("m")

Which prints out: "Thu Mar 10 2016 16:00:00 GMT-0800 (Pacific Standard Time)"

Then you could parse this out and get the parts you want. Or you can look into the other return toString formats in the links above.

How do i convert "2016-03-10 16:00:00.0" to March 10,2016 in JavaScript?

2 Answers2

All browsers

Modern browsers only