I've created an app that takes in HTML inputs and goes through JavaScript to create an event on a native calendar events. It takes the time from the <input type="datetime-local">, and it's putting in a different time because it's picking a different time zone. If I enter 1 o'clock PM as a time it will return 8 o'clock AM.

<input type="datetime-local" id="startDate" name="startDate">

And the JavaScript:

var startDate = new Date($("#startDate").val());

Any help would be awesome. I can post more code if needed.

I've created an app that takes in HTML inputs and goes through JavaScript to create an event on a native calendar events. It takes the time from the <input type="datetime-local">, and it's putting in a different time because it's picking a different time zone. If I enter 1 o'clock PM as a time it will return 8 o'clock AM.

<input type="datetime-local" id="startDate" name="startDate">

And the JavaScript:

var startDate = new Date($("#startDate").val());

Any help would be awesome. I can post more code if needed.

• javascript
• html
• datetime
• timezone

• 1 Post the full code and make a jsfiddle.net – redditor Commented Jul 11, 2014 at 17:58
• 1 @redditor - The question is clear enough. A fiddle would be useful, but not every JavaScript question needs a fiddle. – Matt Johnson-Pint Commented Jul 12, 2014 at 22:06
• 1 @MattJohnson Fair enough. I thought it was necessary, which is why I requested it. The question was so clear that you edited the question twice /s – redditor Commented Jul 12, 2014 at 22:26
• 1 @redditor - Yes, I edited it 3 times actually. That's because StackOverflow's mission is to create questions and answers that are useful to others. Reformatting, fixing spelling and tags, and removing unrelated elements are encouraged. I didn't change the question's intent, nor did I add any qualifying material to the question. Anyway - asking for a fiddle is fine. I wasn't trying to scold - just informing you. Thanks. – Matt Johnson-Pint Commented Jul 12, 2014 at 22:32
• @MattJohnson I left out the third one because it was just a tagging issue. No worries, buddy, I'll keep a safety lock on my jsfiddle trigger in future :) – redditor Commented Jul 12, 2014 at 22:33

1 Answer 1

The HTML5 datetime-local input type will give you a string value back, which contains the date and time in ISO8601 format, with minute precision, and without any time zone offset.

For example: 2014-07-12T01:00

The JavaScript date object is notoriously inconsistent when it comes to parsing dates from strings. In most implementations, when you provide a string like this, it erroneously assumes the value is in UTC. Therefore, the Date object you get back will be adjusted by the time zone offset from your local computer.

There are two approaches to work around the problem:

Option 1

Manipulate the string to a format that will likely be interpreted as local time by the Date object's parser. Specifically, replace the dashes (-) with forward slashes (/) and replace the T with a space.

var s = $("#startDate").val();
var startDate = new Date(s.replace(/-/g,'/').replace('T',' '));

Option 2

Use a library with more capable date parsing abilities. There are several available. One of the most popular is moment.js.

Moment.js has lots of options, but it just so happens that the default behavior is exactly what you need. So you can just pass the string to the moment constructor without any parameters.

var s = $("#startDate").val();
var startDate = moment(s).toDate();