Time show Nan:Nan in Firefox, Chrome works perfect

Question

this is my output in Google Chrome:

And this is my output in Firefox:

This is my function:

    function LoadSessions()
{ //LOAD SESSIONS FROM LOCALSTORAGE
    var retrievedObject = localStorage.getItem('session');

    // CALL FUNCTION
    parsePerObject(JSON.parse(retrievedObject));

    function parsePerObject(data)
    {
        // Turn the data object into an array
        var dataArray = [];
        $.each(data, function (key, value){
            dataArray.push(value);
        });

        // Sort data by starttime
        dataArray.sort(function (a, b) {
            if (a.starttime > b.starttime) return 1;
            if (a.starttime < b.starttime) return -1;
            return 0;
        });

        // Array with days of the week    
        var d_names = ["Sunday", "Monday", "Tuesday",
        "Wednesday", "Thursday", "Friday", "Saturday"];

        // Array with months of the year    
        var m_names = ["January", "February", "March", 
        "April", "May", "June", "July", "August", "September", 
        "October", "November", "December"];

        // Variables
        var content = "",
            dates = [], 
            date = {};

        // LOOP OBJECTS
        $.each(dataArray, function(i, item)
        {
            // Date
            var d = new Date(item.starttime);

            var year = d.getFullYear();
            var month = d.getMonth();
            var day = d.getDate();
            var da = d.getDay();

            date.value = year + "-" + month + "-" + day;

            // Startime & endtime
            var starttime = new Date(item.starttime);
            var endtime = new Date(item.endtime);

            var hour_starttime = starttime.getHours();
            var min_starttime = starttime.getMinutes();

            var hour_endtime = endtime.getHours();
            var min_endtime = endtime.getMinutes();

            // 12:00 instead of 12:0
            if(min_starttime < 10) min_starttime += "0";  
            if(min_endtime < 10) min_endtime += "0";

            // Loop dates
            $(date).each(function() 
            {
                // If the date is not in array dates
                if($.inArray(date.value, dates) == -1)
                {
                    date.firstchild = item.id;

                    content = "<div class='span6'><h2 id='" + item.id + "'" + " class='before-blocks'>" + d_names[da] + " " + day + " " + m_names[month] + " " + year + "</h2>";
                    content += "<ul class='sessionlist blocks unstyled'>";
                    content += "<li id='item" + item.id + "' class='contentblock has-thumb'>";
                    content += "<a href='/sessions/view/" + item.id + "'>";
                    content += hour_starttime + ":" + min_starttime + " - " + hour_endtime + ":" + min_endtime;
                    content += "<span class='ellipsis name' style='width: 95%;'><b>" + item.name + "</b></span>";
                    content += "<span class='ellipsis'><em>" + item.speaker + "</em></span></a></li>";
                    $("#here").append(content);

                    // Add date to dates 
                    dates.push(date.value);
                }

                // If the date is in array dates
                else
                {
                    var second = "<li id='item" + item.id + "' class='contentblock has-thumb'>";
                    second += "<a href='/sessions/view/" + item.id + "'>";
                    second += hour_starttime + ":" + min_starttime + " - " + hour_endtime + ":" + min_endtime;
                    second += "<span class='ellipsis name' style='width: 95%;'><b>" + item.name + "</b></span>";
                    second += "<span class='ellipsis'><em>" + item.speaker + "</em></span></a></li>";
                    $("#item" + date.firstchild).parent().append(second);    // Add li to parent (ul) of previous li
                }
                content = "</ul></div>";
                $("#here").append(content);
            });
        }); 
    }
}

In my localStorage i have objects like this:

{"21216":{"id":"21216","external_id":"","sessiongroupid":"1861","eventid":"5588","order":"0","name":"RESTful Services Made Easy with ZF2","description":"Need to understand ZF2? and implements each of these capabilities.","starttime":"2013-01-25 09:00:00","endtime":"2013-01-25 12:30:00","speaker":"Matthew Weier O'Phinney, Rob Allen","location":"Tutorial Room","mapid":"0","xpos":"0.000000","ypos":"0.000000","maptype":"plan","imageurl":"","presentation":"","organizer":"0","twitter":"","allowAddToFavorites":"0","allowAddToAgenda":"0","votes":"0","url":"http://conference.phpbenelux.eu/","venueid":"0"}}

Does anyknow knows why I don't get the time in firefox and it show NaN:NaN?

Answer 1

If you don't want to change how the date is stored internally, and don't mind including an external library, moment.js will parse these strings for you correctly if you provide the format. See the docs for parsing (http://momentjs.com/docs/#/parsing/string-format/) and formatting (http://momentjs.com/docs/#/displaying/format/)

var d = new moment(item.starttime, "YYYY-MM-DD HH:mm:ss");
// To get the date as 'Friday 25th January 2013'
var datestring = d.format("dddd Do MMMM YYYY");
// To get the time as '09:30'
var timestring = d.format("HH:mm");

Answer 2

According to MDN, 'yyyy-MM-dd HH:mm:ss' is not valid date format, because it accepts RFC2822 and ISO 8601 formats. It's not that Firefox is broken, it's just Chrome is a bit more forgiving. To fix this situation in Firefox, use this format "2013-01-25T09:00:00".

Answer 3

Instead of using the Date(string) constructor use the Date(milliseconds) constructor : http://www.w3schools.com/js/js_obj_date.asp

The reason is the Date(string) will be parsed differently depending on browser language settings. And in your case it is not being parsed by Firefox (due to some setting) and is therefore NaN. Of course you would need to change your internal storage representation to a number as well.

Get current time using :

var time = (new Date()).getTime();

And load it later using

var date = new Date(time);

Alternatively use moment.js : http://momentjs.com/docs/

Iff starttime is of format 2013-01-25 09:00:00 you need to use

var starttime = moment(item.starttime,"YYYY-MM-DD HH:mm:ss")

similar for endtime.

Answer 4

Your time strings can be adjusted to work in firefox by replacing the space after the date part with a 'T', and appending a 'Z' at the end. This will also work in modern webkit && IE9+ browsers.

Older IEs need more...

var starttime='2013-01-25 12:30:00';
if(starttime.indexOf('Z')==-1)starttime=starttime.replace(' ','T')+'Z';

var date=new Date(starttime)

date.toUTCString()
/*  returned values: 
Firefox 20.0: Fri, 25 Jan 2013 12:30:00 GMT
Chrome 26.0.1410.64: Fri, 25 Jan 2013 12:30:00 GMT
MSIE 10.0: Fri, 25 Jan 2013 12:30:00 UTC
Opera 12.12: Fri, 25 Jan 2013 12:30:00 GMT
*/