CODEWITHSUNDEEP
javascriptsafaricross-browser
Marrs
Marrs

Reputation: 716

Date string not recognized in Safari

My JavaScript code is working on on Chrome, IE, and Firefox, but when it gets to safari it doesn't work. I believe I have narrowed down the problem: When creating a 'new Date' in JavaScript, all other browsers recognize my string except safari.

HTML:

<form>
<input id="timeIn" value="1:00 AM"/>
<input id="dateIn" value="1/20/2012"/>
<input id="timeOut" value="2:00 AM"/>
<input id="dateOut" value="1/21/2012"/>
</form>​

JavaScript:

function calcHours() {
    // Build datetime objects and subtract
    var timeIn = new Date($('#timeIn').val() + $('#dateIn').val());
    if(!isValidDate(timeIn)) return -1;
    var timeOut = new Date($('#timeOut').val() + $('#dateOut').val());
    if(!isValidDate(timeOut)) return -1;
    var hours = (timeOut - timeIn)/(1000*60*60);
    return hours.toFixed(1);
}

function isValidDate(d) {
    console.log(d);
    if ( Object.prototype.toString.call(d) === "[object Date]" ) {
      // it is a date
      if ( isNaN( d.getTime() ) ) {  // d.valueOf() could also work
        // date is not valid
          console.log("isn't valid");
          return 0;
      }
      else {
        // date is valid
          console.log("is valid");
          return 1;
      }
    }
    else {
      // not a date
        console.log("isn't valid");
        return 0;
    }
}
var hours = calcHours();
console.log("Hours:", hours);​

I have made a js fiddle: http://jsfiddle.net/mq72k/7/. If you open it up in chrome, it will work fine. If you open it up in Safari, it will say invalid date for the same inputs and not work at all. I have also tried varying the string a bit, adding spaces, different order ect.

Does any one have any ideas how to fix this cross browser compatibility issue?

Upvotes: 0

Views: 882

Answers (3)

RobG
RobG

Reputation: 147513

Javascript does not parse string dates very well at all, including ISO8601 formats. You must parse the string yourself. You especially should not expect a minor format like month/day/year to be parsed since it is used by a small minority of the global population.

Incidentally, this has nothing to do with jQuery.

Edit

To reliably parse m/d/y format:

function toDate(ds) {
  var a = ds.split('/');
  return new Date(+a[2], (a[0] - 1), +a[1]);
}

The above assumes a correct date string is supplied. To check that it's a valid date at the same time:

function toDate(ds) {
  var a = ds.split('/');
  var d = new Date(+a[2], (a[0] - 1), +a[1]);

  if (d.getDate() == a[1] && d.getFullYear() == a[2]) {
    return d;

  } else {
    return NaN; // or some other suitable value like null or undefined
  }
}

Upvotes: -1

JJJ
JJJ

Reputation: 33153

Frankly, I'm surprised other browsers parse the string correctly, as the string you give to the date object is 1:00 AM1/20/2012. Put the date first and add a space in between.

var timeIn = new Date($('#dateIn').val() + ' ' + $('#timeIn').val());
var timeOut = new Date($('#dateOut').val() + ' ' + $('#timeOut').val());

http://jsfiddle.net/mq72k/8/

Upvotes: 0

kayen
kayen

Reputation: 4868

Try using an external plugin to parse your dates, something like Datejs

Upvotes: 0

Related Questions