Question

Okay so I am making this race schedule and I have it in json like so:

{
    "races": [
        {
            "title": "Boston race",
            "location": "Boston MA",
            "dates": "12-14 Jan"
        },
        {
            "title": "New York race",
            "location": "New York NY",
            "dates": "1-2 Feb"
        },
        {
            "title": "Austin race",
            "location": "Austin TX",
            "dates": "29-30 Feb"
        },
        {
            "title": "LA race",
            "location": "LA CA",
            "dates": "12-14 March"
        },
        {
            "title": "Atlanta race",
            "location": "Atlanta GE",
            "dates": "1-2 April"
        },
        {
            "title": "Kansas City race",
            "location": "Kansas City KS",
            "dates": "29-30 May"
        },
        {
            "title": "Richmond race",
            "location": "Richmond VA",
            "dates": "12-14 Jun"
        },
        {
            "title": "La race",
            "location": "LA CA",
            "dates": "1-2 July"
        },
        {
            "title": "Austin race",
            "location": "Austin TX",
            "dates": "29-30 Aug"
        }
    ]
}

The dates and titles are just dummy ones for simplicity but basically I want to have a little box which says when the next race is, where and the dates. The tricky part is that I want it to change displaying say “next race” Austin to “next race” LA’s at 4:00pm race time. Now to make it harder the timezones are different and I want it to be timezone specific. Everyone’s changes at the same time but at 4:00pm after the race. So the Texas race would change at 4:00pm after the race and the people in LA would see it at 2:00pm because of timezones.

A.can you set it to change at a given time

B.Can it be specific to 4:00pm after the races timezone or will I need to convert all of them to the same timezone’s time.

Is this possible with just javascript and thank you for your time.

I want the date changes to be year specific as well, something like 3/23/2011 change @4pm

How would I set this up. JS and html if its tricky please.

Answer 1

1. Add a key to your JSON for the display date. It would store the date as a JSON.stringify() version of the date, which stores the time zone.
2. When determining which one to show, convert that JSON.stringify string into a date ((new Date(JSON.parse(dateVal)))
3. Then convert that date to UTC time and make the comparison in UTC time from that the browser is reporting (dateVal.UTC() > new Date().UTC())

You shouldn’t have to ask for timezone as long as you are willing to use the one that the browser thinks it is in.

UPDATE:

Here is a jsfiddle example: http://jsfiddle.net/pseudosavant/wxwP7/
Keep in mind that the JSON.stringify object/method only has native support back to IE8, so if you (very unfortunately) must support lower than IE8 then you’ll need to use a polyfill for it such as Douglas Crockford’s JSON.js.