Nan time: Nan in Firefox, Chrome works fine

Question

this is my output in google chrome:

And this is my conclusion 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 easily made with ZF2 "," description ":" Need to understand ZF2? and implements each of these features. "," starttime ":" 2013-01-25 09:00:00 "," endtime ":" 2013-01-25 12:30:00 "," speaker ":" Matthew Weier O'Phinney, Rob Allen " , "location": "Tutorial Number" "MAPID": "0", "XPOS": "0.000000", "YPos": "0.000000", "MapType": "plan", "ImageUrl": "," presentation " : "", "" 0 "," 0 "," 0 "," url ":" http://conference.phpbenelux.eu/ "," siteid ":" 0 "}}

Does anyone know why I am not getting time in firefox and it shows NaN: NaN?

Answer 1

If you do not want to change how the date is stored inside, and do not mind including an external library in it, moment.js will analyze these lines for you correctly if you provide a format. See 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

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

The reason is that the Date (string) will be parsed differently depending on the language settings of the browser. And in your case, this is not parsed by Firefox (due to some tweaking), and therefore NaN. Of course, you will need to change the internal storage representation to a number.

Get the current time using:

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

And download it later using

 var date = new Date(time); 

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

Iff startup time has the format 2013-01-25 09:00:00, you need to use

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

similar to the end time.

Answer 3

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

Answer 4

Your temporary lines can be configured to work in firefox, replacing the space after the date part with “T”, and adding “Z” at the end. It will also work in modern webkit && IE9 +.

Old IE needs 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 */ 

Answer 5

Another non-chrom issue

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

What happens when time is 1 ? You will get 10 .