JavaScript new Date() NaN on iPhone

This is one of those problems that in reflection is rather simple but at the time is very very (very!) annoying.

Background

I’m writing an application that synchronizes data to and from a mobile device and the application has a display that will tell you how long since you last synced. The application gives back the correct information on my Android device but on an iPhone I used for development ( well the wife’s phone , don’t want to admit to owning one :), that’s a  joke for you hardcore apple lovers, I was getting NaN (not a number).

Why the Problem ?

I’m getting the issues and other’s out there may also be for the same reason. I am passing a string to the Date object and is in the following format ;

yyyy-mm-dd hh:mm:ss

It turns out that The yyyy-mm-dd (ISO 8601) date format is not supported in Safari and IE. It is part of ECMAscript 5.

I wasn’t sure how to reproduce the issue at first as it was happening on the iPhone but realizing it may be rendering in Safari I downloaded the safari web browser to my windows machine.’

Example of Date Problem

Safari: Calling new date in Safari with the format I use in my application.

safari_newdate_err

Chrome: Exactly the same code and a Date object is created.

chrome_newdate
Getting around the problem

To get around the issue I check on the mobile if its running on a Apple product and then I simply reformat the date so it creates a new Date object in the following format ;

mm/dd/yyyy hh:mm:ss

Safari: new Date with altered format.

safari_newdate

I have used Phonegaps standard application object and added a function that checks for the device

var app = {

isAppleDevice: function() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad)/) != null) {
      return true;
    }
    return false;
  },.....etc

Then I can simple determine that when the application is running on iPhone/iPad I can alter the date (assuming myDate variable is in format mentioned at start of the post).

if (app.isAppleDevice()) {
var dateParts = myDate.substring(0,10).split('-');
var timePart = myDate.substr(11);
myDate= dateParts[1] + '/' + dateParts[2] + '/' + dateParts[0] + ' ' + timePart;
}

Hope that helps someone. I found a useful date library in my searches for the answer but the simplest solution was the one in my post :).

Hope that Helps

Thanks for reading.

Neil

Advertisements

Debugging Phonegap on Android With Chrome

I have been working on a project that involves phonegap at work and I was going crazy trying to sort out some of the strange design problems when publishing my application to a physical mobile device.

There are tools out there like ripple for emulating phonegap , you can even use the chrome tools to set the device and emulate it to a fashion, but it always looked different on the physical phone ( arrrrrrrrrrh! moments ).

So how do we solve this ?

Ok, lets first outline some of the prerequisites as I hate following a post to find that it wouldn’t work because I didn’t have the correct versions anyway.

Prerequisites

  • Phonegap 3.3 ( or higher)
  • Android Device (kitkat or higher)
    *note your device needs to be in developer mode.
  • USB Cable (normal charger cable)
  • Chrome (30 or higher)

Required project changes.

In your ‘AndroidManifest.xml’ you will need to make sure you are targeting the SDK version 19 (kitkat).

<uses-sdk android:minSdkVersion="15" android:targetSdkVersion="19" />

The ‘project.properties’ will also need to target the correct Sdk Version. Alter the target as follows;

target=android-19

Phonegap basically wraps your HTML into whats called a WebView, so the next step is to enable debugging for this special view.

Update your main java file (default activity) and include the following imports to the top of the file.

import android.os.Build;
import android.webkit.WebView;

Then within the onCreate method you can enable debugging buy checking for the build version and enabling debugging for the WebView;

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

You are ready to then build your project and publish it to your device.

Inspecting from Chrome.

Your can start your app on the mobile now or later , but you must make sure you have it connected via the normal USB cable.

In chrome type the following address to list the connected devices.

chrome://inspect/#devices

You should then see your device and project name shown after the WebView.

phonegap-chrome-debug

Clicking the inspect link then loads up the wonderful Chrome Dev tools we ahve all come to love and now you can see and change the HTML that is running within the Phonegap framework ( pretty cool ).

Happy Debugging…

Neil