parsing a UTC ISO date to a local time date in javascript/jquery

Question

I have tried to search for the answer already, and although I find answers that are very similar, I don't think they are exactly what I am looking for. Please forgive me if this is already answered elsewhere.

I am trying to parse an ISO date in javascript so that I can compare it to the client system date and display information depending on if the ISO date is before or after the client system date.

This was fine until I needed to support IE8 and now I am stuck.

I have created a function because I have three different dates that I need to do this to.

for example, my ISO date is: 2015-12-22T11:59 in UTC time.

but once my date is parsed, the full date is 11:59 in local time, no matter which time zone i test, it's always 11.59 in THAT time zone.

I know that the function I have created currently doesn't do anything with timezone, this is where I am stuck. I don't know what to add to get my end date to change as a reflection of the timezone of the clients machine.

any help or advice would be greatly appreciated. I am not able to use something like moments.js because I have an upload restriction.

Jquery is available though. or plain javascript.

<script>
function setSaleContent() {


    //creating a new date object that takes the clients current system time. so we can compare it to the dates stored in our array
    var currentDate = new Date();
    console.log(currentDate + " this is the clients date ");


    //These variables actually come from an external array object, but I'm putting them in here like this for this example. 
    var destinations = {
        freedate: "2015-12-16T11:59",  
        courierdate: "2015-12-22T11:59",
        nextdaydate: "2015-12-23T11:59",
    }

    //fetch all the ISO dates from the array. 
    var freeDateISO = destinations["freedate"];
    var courierDateISO = destinations["courierdate"];
    var nextdayDateISO = destinations["nextdaydate"];


    //I am creating this reusable function to split up my ISO date for the sake of IE8.. and create it into a date format that can be compared against another date.  I know that this isn't doing anything with my timezone and that is where my problem lies. 
    function parseDate(str) {
        var parts = /^(\d{4}).(\d{2}).(\d{2}).(\d{2}):(\d{2})/.exec(str);
        if (parts) {
            return new Date(parts[1], parts[2] - 1, parts[3], parts[4], parts[5]);
        }
        return new Date();
    }


    //I would like this date to change to reflect the time zone of the clients system time. 
    //currently returns the date at 11.59 regardless of timezone. 
    //If i was in GMT  i would want it to say 11.59
    //If i was in CT time I would like this to say 05.59
    //If i was in Perth I would like this to say  19:59
    var freeDate = parseDate(freeDateISO);
    console.log(freeDate + " this is the converted date for IE")





}


window.onload = setSaleContent;

Do not use `new Date(…)` (which creates datetimes from local values), use `new Date(Date.UTC(…))` for utc values! — Bergi, Oct 22 '15 at 20:41

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The simple solution is to append Z to the ISO date to indicate it is in UTC time, such as 2015-12-22T11:59Z.

When JavaScript parses that date as a string, it will then automatically convert the UTC date to the local time zone.

While this is simple enough with a parsing call in the form new Date(str);, it will not play nice with your parse call with numerical arguments targeting IE8 and other old browsers.

A polyfill for parsing ISO dates with timezone exists: Javascript JSON Date parse in IE7/IE8 returns NaN
This can replace your custom parseDate function after some modification to take an input string.

Alternatively, implement your own custom date manipulater to account for the local timezone using the .getTimezoneOffset() method on the newly created date, which gives the time zone offset in minutes, but you will have to come up with a method of utilising the offset such as adjusting hours and minutes, due to the limited methods of the JavaScript date object.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 22 '15 at 19:31

Ryan

416
2
7

I tried to append Z to it before, and that worked perfectly when I was doing new Date(str). But that doesn't work in IE8. – w3littlebird Oct 22 '15 at 20:24
I expected that to happen because of your custom parse code for IE8. Like I said in the answer, you'll have to do something with `.getTimezoneOffset()` and implement your own date manipulation methods if you cannot use any libraries. You could try appending it with `+00:00` instead of `Z` and see if IE8 can parse that as a string but I doubt there are any better solutions. Alternatively, see this IE7/8 polyfill for parsing ISO dates: http://stackoverflow.com/questions/11020658/javascript-json-date-parse-in-ie7-ie8-returns-nan – Ryan Oct 22 '15 at 20:29
Sorry was trying to reply on iPad and messed up my comment. I tried to append Z to it before, and that worked perfectly when I was doing new Date(str) and did exactly what I needed, But that doesn't work in IE8. That is why I created the parseDate function. I know my function isn't doing anything with date parts to get the time zone and I don't know how to write it in a way that it can happen, or if I need to do some getTimeZoneOffset calculation. But whichever I need to do,I don't know what to write to achieve it, and I've tried for hours and googled for hours. – w3littlebird Oct 22 '15 at 20:31
Have a go at replacing/enhancing your custom `parseDate` function with the polyfill I mentioned in the previous comment and see it that works. By the looks of the regex in the polyfill, it should support timezones and should fix your problem. – Ryan Oct 22 '15 at 20:34

parsing a UTC ISO date to a local time date in javascript/jquery

1 Answers1