I'll add a new answer to this very old question, because it's referenced often and all the other answers are demonstrating incorrect approaches such as epoch shifting or re-parsing, as described here. Additionally, they're only addressing the title of the question. I'll instead focus on the question body, and ignore the title.
Suppose a user of your website enters a date range.
2009-1-1 to 2009-1-3
You need to send this date to a server for some processing, but the server expects all dates and times to be in UTC.
First, note that this format is nonstandard. It should be using two digits for both the month and day components. Leading zeros are required for ISO 8601 compatibility, which is typically expected from date parsers. The dates should be expressed as 2009-01-01
to 2009-01-03
.
The next error is in the design that "... all dates and times to be in UTC". The user didn't select a date and time, they only selected a date. Whole dates cannot be converted to UTC, because they're not in any particular time zone to begin with. Assuming otherwise is akin to me handing you a paper calendar such as below and asking what time zone it's in.
Of course, none of those days has a time zone, because time is not represented on this device. Each square represents a specific day within the given month and year. If one were to associate time with each day, it wouldn't be a single time, but rather the range of times from the start of the day to the end of the day. Sure, each of those points could be converted to UTC if the calendar were to be read by a person in a particular time zone. But generally we don't go around conveying ranges of timestamps to each-other. Instead we just use a date - so that's what your program should do as well.
This is indeed what happens with the standard HTML5 <input type="date">
tag. Pick a date from below, and notice that value
given is a string in ISO 8601 yyyy-mm-dd
format.
<input type="date" id="dt" onchange="console.log(this.value, typeof(this.value))">
It's not a JS Date
object, because the Date
object is actually not a date, but rather a timestamp. It's name was poorly chosen. It contains only a single value, which is the number of milliseconds since 1970-01-01 00:00:00.000 UTC. Thus, a Date
object can't accurately represent a date (a square on the calendar, or the user's selection from the date input).
So instead of assigning an arbitrary time (such as midnight) and converting between time zones, the simpler solution is to just send the year-month-day string directly to your server. The server should then store it in a way that preserves the year month and day. For example, most relational databases offer a date
data type that is distinct from datetime
or timestamp
. If the user passes a date, then store a date, using the date
type. When you later retrieve it, also just pass back the date. Don't assign midnight. In the example use case, you might pass data back and forth in JSON such as this:
{
"startDate": "2009-01-01",
"endDate": "2009-01-03"
}
The same applies to passing data in a form post or querystring or any other manner. Just pass the date, and don't add any time or time zone. "2009-01-01"
is not the same as any of "2009-01-01T00:00:00.000"
"2009-01-01T00:00:00.000Z"
, "2009-01-01T00:00:00.000-8:00"
, etc.
Going back to the remainder of the question:
Now suppose the user is in Alaska. Since they are in a timezone quite different from UTC, the date range needs to be converted to something like this:
2009-1-1T8:00:00 to 2009-1-4T7:59:59
Using the JavaScript Date
object, how would you convert the first "localized" date range into something the server will understand?
I hope by now you realize that the premise of this question is flawed. One doesn't use the Date
object for this purpose. Nor does one consider that the user is Alaska if they're just selecting a range of dates. For all we know, those dates might be intended to later used to book a hotel stay in Japan. The user's local time zone is thus irrelevant.
That said, what if we did need additional time zone information for some scenario? Perhaps instead of picking a range of dates, we're actually picking the date and time for a meeting. Well, then we would also need to know the time zone for that meeting. It might be the same as the user's time zone, or perhaps the meeting is to be held in some other location.
If it's the user's time zone we need, we can gather that from the browser, using the EcmaScript Intl API.
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log("Your time zone is:", tz);
If it's some other time zone, we'll have to provide a drop-down list or some other mechanism to select the target time zone.
Either way, we should store for the meeting the selected date, the selected time, and the selected time zone. We should not convert that to a UTC timestamp, because we cannot predict the future. There's no way to know if the government responsible for that time zone may change its standard time offset or daylight saving time dates or times, etc.
For example, if the meeting is to be held at 2:00 PM in New York on July 1 2030, then we should send to our backend something like:
{
"datetime": "2030-07-01T14:00",
"timezone": "America/New_York"
}
If I were, for example, storing that in a MySQL database, I'd use the datetime
and varchar
data types. If using PostgreSQL, it would be timestamp without time zone
and varchar
. For this purpose I wouldn't use timestamp
in MySQL or timestamp with time zone
in PostgreSQL, because those types are designed to convert values to/from UTC.
Summary
The original question was an XY problem with a misleading title. The presumption that one should convert to/from UTC when working with date-only values is incorrect. Instead, pass date-only values as strings, in yyyy-mm-dd
format, without conversion.