JavaScript Invalid Date or NaN in Internet Explorer - Solved

Recently, I faced an issue with Internet Explorer while I was working with Date() function of JavaScript.

This issue occurred when I was passing string which has the date to the JavaScript Date() function and wanted to display it on the page.

My code was this:

  <script type="text/javascript">

       var dateValue = "2016-01-06 00:43:06";

       var date = new Date(dateValue);

       alert(date);

    </script>

When I executed this code in Internet Explorer, I got error as "Invalid Date".

To my surprise, the same code when I executed in Chrome, I got the correct output I was expecting.

After some research, I found that with browsers like Internet Explorer and Safari, we have to pass date string in specific format to the JavaScript Date() function. The browsers like Chrome, Firefox and Opera supports any format.

So, what is the solution for Internet Explorer?

Solution is to modify the format of the string passed in the JavaScript Date() function.

That means, we shouldn't pass the date string to the JavaScript Date() function with "yyyy-mm-dd" or "yyyy-mm-dd hh:mm:ss" format while executing the same in Internet Explorer or Safari. 

The correct formats would be:
"yyyy/mm/dd" or
"yyyy/mm/dd hh:mm:ss" or
"yyyy, mm-1, dd" or
"yyyy, mm-1, dd, hh, mm, ss" or
"mm/dd/yyyy" or
"mm/dd/yyyy hh:mm:ss" or you could use milliseconds as well.

In other words, we can't use dash ("-") in the format for passing date string in the JavaScript Date() function.

To solve the existing problem, I used following code which helped me in getting the correct and expected output in both of my browsers that is Internet Explorer and Chrome.

<script type="text/javascript">

        var dateValue = "2016-01-06 00:43:06";

        var modifiedDateValue = dateValue.split("-"); // Gives Output as 2016,01,06 00:43:06

        var date = new Date(modifiedDateValue[0] + "/" + modifiedDateValue[1] + "/" + modifiedDateValue[2]); // Here, passing the format as "yyyy/mm/dd"    

        alert(date);

    </script>

Here is the output I got from the Internet Explorer:

As you could now see, instead of getting "Invalid Date" or "NaN" error, I got the correct date along with the time I have passed in the date string.

Here is the output I got from the Chrome:

Alternatively, you can also use replace function in the code to replace all the dashes in your date string with forward slash as shown below:

    <script type="text/javascript">

        var dateValue = "2016-01-06 00:43:06";

        var modifiedDateValue = dateValue.replace("-", "/");         

        var date = new Date(modifiedDateValue);

        alert(date);

    </script>

This code will also give the same valid output in Internet Explorer and Chrome along with other browsers as the above code gives.

It is up to your choice of selecting the code which will work for you.

Hope this helps!