Question

I have to say, I am not an expert with Javascript dates.. at all! I have looked at DateJS for instance, however my problem is not just a simple date conversion (or maybe it should be!).

Quick background:
I have a service call which returns some JSON data that include the dreaded Epoch style date from WCF/REST (I can’t use Webapi at the moment – which would give me native JSON.NET?).

So a date examlple from the JSON object is:

StartDate: “/Date(1343378404560+0100)/”

Now, the JSON returned from my call has more information that I need for my Wijmo event calendar object, so I thought ok, will create a Javascript function/model for my Wijmo event object, and use jQuery MAP function to select only the fields I need.

My Javascript event model looks like this:

function wijmoEventModel(in_id, in_calendar, in_subject, in_location, in_start, in_end, in_description, in_colour, in_allday, in_tag) {

    this._id = in_id;
    this._calendar = in_calendar;
    this._subject = in_subject;
    this._location = in_location;
    this._start = jsonDate(in_start);
    this._end = jsonDate(in_end);
    this._description = in_description;
    this._colour = in_colour;
    this._allday = in_allday;
    this._tag = in_tag;

    //  Public Properties/Methods
    return {
        id: this.id,
        calendar: this._calendar,
        subject: this._subject,
        location: this._location,
        start: this._start,
        end: this._end,
        description: this._description,
        color: this._colour,
        allday: this._allday,
        tag: this._tag
    }
};

So, I have another little function that uses the jQuery MAP function as so:

function returnWijmoCalendarObject(diaryEventData) {

    //  Using jQuery map, reduce our raw event data down to only the required wijmo calendar items
    var _calobj = $.map(diaryEventData, function (fld) {
        return new wijmoEventModel(fld.ID, fld.ResourceCalendarID, fld.EventTitle, fld.Location, fld.StartDate, fld.EndDate, fld.Description, fld.ResourceColour, fld.AllDay);
    });
    return {
        calendardata: _calobj
    }
};

SO the above function just selects the required fields from my original full JSON return, and uses my Javascript function/model to return a new “calendardata” JSON object which I can use with my Wijmo event calendar..

There is one more small function which converts the Epoch style date “/Date(1343378404560+0100)/”
into (I think!) a real Javascript Date object.. like this:

function jsonDate(rawDate) {

    var d = new Date();
    d.setMilliseconds = parseInt(rawDate.substr(6));
    return d;
}

So the above little function of course is used in the first code block above to hopefully convert that Epoch style original date into a Javascript Date.

SO MY QUESTION/PROBLEM IS:

The model above, and jQuery map function works well, I get a subset JSON object of exactly the structure I need, however the dates returned (wijmoEventModel.start & end) don’t come back as a Javascript Date object?? even though debuging in that wijmoEventModel definitely has the dates as JS date objects??

Obviously I am missing/not understanding some vital and fundamental aspects here!!!

PLEASE! if anyone can help as this is driving me crazy…

David.

Answer 1

Setting milliseconds only sets the milliseconds part of a date, it doesn’t set the date from an epoch.

At the heart of a javascript date object is a number of milliseconds since 1970-01-01 00:00:00 in UTC. So if the “time since epoch” that you have is the same, if you convert it to a number you can do:

var d = new Date( Number(millisecondsSinceEpoch) );

See ECMA-262 15.9.3.2

This will create a date object in the local timezone based on the “time since epoch” in UTC. So in different time zones it will show a different time that represent the same instant in UTC.

e.g.

var millisecondsSinceEpoch = '1343378404560';
alert( new Date(Number(millisecondsSinceEpoch))); //Fri Jul 27 2012 18:40:04 GMT+1000 (EST)

The time in the OP is ‘1343378404560+0100’ which implies an offset that I’ll assume is hhmm. So that needs to be subtracted from the number before passing it to Date:

var s = '1343378404560+0100';
var t = s.split('+')[1];

if (t) {
  t = t.substring(0,2)*3600 + t.substring(2)*60;
} else {
  t = 0;
}

var d = new Date(parseInt(s) - t * 1000);  // Fri Jul 27 2012 17:40:04 GMT+1000 (EST)

Edit

The above assumes a sign of “+”, the string should be split on either “+” or “-“, then the sign detected and applied later, e.g.

var t = s.split(/[-+]/)[1];

After setting the value of t, apply the sign:

t *= /-/.test(s)? -1000 : 1000;
var d = new Date(parseInt(s) - t);

Or some variation of the above.