asked on

mozilla firefox and google chrome differences in javascript new Date(); functionality 0o

hi there,
i am using the following javascript to currently create two date objects and compare them, this works in firefox from version 3.0+ atm.
html elements inspected after ajax population in firebug 1.8.3 within firefox 7.0.1:

<select tabindex="10" accesskey="i" id="menu_fromtimestamp" name="menu_fromtimestamp">
          <option>* Select Month From</option>
          <option value="2011-08-01 00:00:00">1st August 2011, 00:00:00</option>
          <option value="2011-09-01 00:00:00">1st September 2011, 00:00:00</option>
          <option value="2011-10-01 00:00:00">1st October 2011, 00:00:00</option>
          <option value="2011-11-01 00:00:00">1st November 2011, 00:00:00</option>
</select>
<select tabindex="11" accesskey="m" id="menu_totimestamp" name="menu_totimestamp">
          <option>* Select Month To</option>
          <option value="2011-11-30 23:59:59">30th November 2011, 23:59:59</option>
          <option value="2011-10-31 23:59:59">31st October 2011, 23:59:59</option>
          <option value="2011-09-30 23:59:59">30th September 2011, 23:59:59</option>
          <option value="2011-08-31 23:59:59">31st August 2011, 23:59:59</option>
</select>

Open in new window

onchange functions for these two elements:

document.form_transactions.menu_fromtimestamp.onchange = function () {
	var fi = document.form_transactions.menu_fromtimestamp.selectedIndex;
	var ti = document.form_transactions.menu_totimestamp.selectedIndex;
	var from = document.form_transactions.menu_fromtimestamp.options[fi].value;
	var till = document.form_transactions.menu_totimestamp.options[ti].value;
	var fm = document.form_transactions.menu_fromtimestamp.options[fi].text.split(" ")[1];
	var tm = document.form_transactions.menu_totimestamp.options[ti].text.split(" ")[1];
	var fd = new Date(
			  	fm + " " +					// month
				from.split("-")[2] + ", " +		// dd,
				from.split("-")[0]				// yyyy
			 );
	var td = new Date(
			  	tm + " " +					// month
				till.split("-")[2] + ", " +		// dd,
				till.split("-")[0]				// yyyy
			 );
	if (td > fd) {
		return ajaxRequest(document.form_transactions.button_refresh);
	} else {
		alert("The TO date must be after the FROM date!"); return false;
	}
}
document.form_transactions.menu_totimestamp.onchange = function () {
	var fi = document.form_transactions.menu_fromtimestamp.selectedIndex;
	var ti = document.form_transactions.menu_totimestamp.selectedIndex;
	var from = document.form_transactions.menu_fromtimestamp.options[fi].value;
	var till = document.form_transactions.menu_totimestamp.options[ti].value;
	var fm = document.form_transactions.menu_fromtimestamp.options[fi].text.split(" ")[1];
	var tm = document.form_transactions.menu_totimestamp.options[ti].text.split(" ")[1];
	var fd = new Date(
			  	fm + " " +					// month
				from.split("-")[2] + ", " +		// dd,
				from.split("-")[0]				// yyyy
			 );
	var td = new Date(
			  	tm + " " +					// month
				till.split("-")[2] + ", " +		// dd,
				till.split("-")[0]				// yyyy
			 );
	if (td > fd) {
		return ajaxRequest(document.form_transactions.button_refresh);
	} else {
		alert("The TO date must be after the FROM date!"); return false;
	}
}

Open in new window

now when selecting From 1st October, in firefox it works no problem no matter the version.
in google chrome however - it does not work! there is clearly some difference. the result is that it alerts one of these dates created, selected 1st October for From and 30th November for To, it says you can't select From date that is after the To date! :(
how the heck would i have to create these dates to compare, so that these functions are compatible for both Mozilla Firefox and Google Chrome?

intellisource

ASKER

perhaps i need to add the hours, minutes and seconds of the dates too when creating them.
the reason for this is the following page i found:
http://wholemeal.co.nz/blog/2011/09/09/chrome-firefox-javascript-date-differences/

intellisource

ASKER

ok weird this: according to my ide (adobe dreamweaver cs5's javascript reference from o'reilly)
i can use the date function as follows:

var now = new Date( );
var myDate = new Date("month dd, yyyy hh:mm:ss");
var myDate = new Date("month dd, yyyy");
var myDate = new Date(yy, mm, dd, hh, mm, ss);
var myDate = new Date(yy, mm, dd);
var myDate = new Date(milliseconds);

Open in new window

however, i have altered the dates creation and alerted thereafter with

	var fd = new Date(
			  	fm + " " +					// month
				from.split("-")[2] + ", " +		// dd,
				from.split("-")[0] + " " +		// yyyy
				from.split(" ")[1]				// hh:mm:ss
			 );
	var td = new Date(
			  	tm + " " +					// month
				till.split("-")[2] + ", " +		// dd,
				till.split("-")[0] + " " +		// yyyy
				from.split(" ")[1]				// hh:mm:ss
			 );
	alert(fd + "\n" + td);

Open in new window

yet i get two Invalid Date's returned in both firefox AND chrome!

Invalid Date
Invalid Date

Open in new window

how THE heck is this possible? and that adobe dreamweaver with it's latest documentation updates is wrong??? :(
someone PLEASE assist on this!

intellisource

ASKER

ok i reverted the date setting to what i had at first and kept the alert, and what i see in Firefox is the following:

Sat Oct 01 2011 00:00:00 GMT+0200 (South Africa Standard Time)
Wed Nov 30 2011 23:59:59 GMT+0200 (South Africa Standard Time)

Open in new window

whereas Chome displays the following:

Invalid Date
Invalid Date

Open in new window

how would i be able to set a valid date in Google Chrome for comparing from the dates within the SELECT element's OPTION values!
i'm at the ends of my wits here...

ASKER CERTIFIED SOLUTION

intellisource

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

intellisource

ASKER

too bad nobody got the 500 points i always make available ;)