Develop Reference

Changing time according to TimeZone in React with date-fns-tz

I have a method that gets a parameter as a time string "15:35". That time is in UTC TimeZone. But I wanna convert it to different TimeZone (for example America/New_York or ...).
I installed date-fns-tz package to convert. But I couldn't find easy way to directly converting time with date-fns-tz. Do u have a easy solution with this package.
Example : Given "18:35" in UTC -> Expected 14:35 in America/New_York
NOTE : Please don't recommend moment-timezone package that is deprecated!

Creating a promotion that starts at 9am for all stores worldwide

Let's say, for example, that a store promotion starts at 9am for all stores worldwide. This means that it starts at 9am CST for stores in Chicago, 9am PST for stores in Seattle, and 9am GMT for stores in the UK.
In our promotions table on Postgres, we would set the start time for this promotion as 09:00:00.
Each store has a computer with a web browser that looks up available promotions. It needs to pass its local time to the server so that the server can return all promotions for that local time. Thus we need to find a way to capture the local time in JavaScript, encode it, send it to a Java backend, reconstruct it, and then compare that with the start time in the promotions table.
The local time, of course, depends on the time zone. If it's 9am in Chicago then a store in Chicago should tell the server that it's 9am. It's futile to send the UTC time without some indication of the time zone.
Question: What's a good way to capture the local time (based on time zone) in JavaScript, encode that, send it to a Java backend, reconstruct it as a Java Date, and then compare that Java Date with the 9am promotion start time in the Postgres database?
My (unsatisfactory) approach: The best I can think of is to send the UTC time in milliseconds using JavaScript's Date.getTime method, along with the time zone offset, which can be calculated in minutes using JavaScript's Date.getTimezoneOffset method and converted to milliseconds. Subtracting the time zone offset from the UTC time in milliseconds, we can then create a Java Date object from the resulting difference. If it's 9am in Chicago, then, hopefully, the Java Date will store 9am. What's a little odd about this approach, however, is that the Java Date will actually be storing 9am UTC, even though it's representing 9am CST. This is just one of the reasons why I am not satisfied with this approach. Can you think of something better?

Postgres
In Postgres, when you mean 9 AM everywhere, or 9 AM anywhere, on a certain date, use the column data type TIMESTAMP WITHOUT TIME ZONE. Any time zone or offset-from-UTC included with an input is ignored, with the date and time-of-day taken as-is (no adjustment) and stored. This data type purposely lacks any concept of time zone or offset-from-UTC.
For time-of-day without a date, use TIME WITHOUT TIME ZONE data type. Postgres also offers a TIME WITH TIME ZONE only because it is required by the SQL spec; this WITH type is nonsensical and should never be used.
Postgres is an excellent choice for such a project, as it offers excellent date-time support in both its data types and in its functions. Databases vary widely in their date-time features.
Java
On the Java backend, use only the modern java.time classes. These years ago supplanted the terrible old date-time classes bundled with the earliest versions of Java.
If not yet using Java 8 or later, find nearly all the same functionality in a back-port to Java 6 & 7 in the ThreeTen-Backport project. Well worth the minor effort of adding this library to your project. From the same fine folks who brought you the java.time classes and the Joda-Time project, all led by the same man Stephen Colebourne.
LocalDateTime
In java.time, use LocalDateTime class for when you mean 9 AM anywhere/everywhere on a certain date. Like TIMESTAMP WITHOUT TIME ZONE in Postgres, this class purposely lacks any concept of zone or offset.
LocalDateTime ldt = LocalDateTime.of( 2018 , 1 , 23 , 15 , 0 , 0 , 0 ) ; // 3 PM on 23rd of January this year.
LocalTime
If you mean the time-of-day only, without a date, use the class LocalTime.
LocalTime lt = LocalTime.of( 15 , 0 ) ; // 3 PM.
JDBC
As of JDBC 4.2 and later you can exchange java.time objects with the database via getObject and setObject methods.
LocalDateTime ldt = myResultSet.getObject( … , LocalDateTime.class ) ;
If your JDBC drivers are not yet updated to 4.2, then fall back to the awful old legacy classes, but convert immediately to the java.time classes.
Given that the legacy classes lack a class for a date plus time-of-day without time zone, we have to fake it. Use java.sql.Timestamp which represents a moment in UTC with a resolution of nanoseconds, and just ignore the fact that it is in UTC.
java.sql.Timestamp ts = myResultSet.getTimestamp( … ) ;
For Java 8 and later, convert using new methods added to the old classes. Convert first to java.time.Instant, which also represents a moment in UTC with a resolution of nanoseconds. Then convert to a LocalDateTime by effectively removing the concept of UTC.
Instant instant = ts.toInstant() ; // Convert from legacy class to modern one.
LocalDateTime ldt = LocalDateTime.ofInstant( instant , ZoneOffset.UTC ) ; // Remove the concept of UTC (or any other offset or zone) from our data.
For Java 6 & 7 using the ThreeTen-Backport library, use the conversion methods in their utility DateTimeUtils class.
org.threeten.bp.Instant instant = org.threeten.bp.DateTimeUtils.toInstant( ts ) ; // Convert from legacy class to modern.
org.threeten.bp.LocalDateTime ldt = LocalDateTime.ofInstant( instant , ZoneOffset.UTC ) ; // Remove the concept of UTC (or any other offset or zone) from our data.
ZonedDateTime
The Local… classes by definition have no real meaning until you place them in the context of a time zone. A LocalDateTime is not a moment, does not represent a point on the timeline.
Specify a proper time zone name in the format of continent/region, such as America/Montreal, Africa/Casablanca, or Pacific/Auckland. Never use the 2-4 letter abbreviation such as PST or BST or EST or IST as they are not true time zones, not standardized, and not even unique(!).
LocalDateTime ldt =
LocalDateTime.of(
LocalDate.of( 2018 , Month.January , 23 ) ,
LocalTime.of( 9 , 0 )
)
;
ZoneId zLosAngeles = ZoneId.of( "America/Los_Angeles" ) ; // Seattle time zone.
ZonedDateTime zdtSeattle = ldt.atZone( zLosAngeles ) ;
ZoneId zChicago = ZoneId.of( "America/Chicago" ) ;
ZonedDateTime zdtChicago = ldt.atZone( zChicago ) ;
ZoneId zLondon = ZoneId.of( "Europe/London" ) ;
ZonedDateTime zdtLondon = ldt.atZone( zLondon ) ;
There we have three ZonedDateTime objects: zdtSeattle, zdtChicago, and zdtLondon. These are all 9 AM on the 23rd of January earlier this year. Understand that these are three very different moments, each being several hours earlier as you go eastward. They all have the same wall-clock time (9 AM on 23rd) but are three different points on the timeline.
JavaScript
While I do not know JavaScript well enough to say for certain, I doubt you have any library there as rich for date-time handling. The java.time framework is industry-leading.
As for web client user-interface development, I use Vaadin, so it is a non-issue: pure Java on back-end auto-generates the HTML/CSS/DOM/JavaScript needed by the web browser.
find a way to capture the local time in JavaScript
As for detecting the current default time zone in the client machine, I’m no expert, but as I recall the browsers do not return a named time zone, only an offset-from-UTC. See the Answer by Matt Johnson for a possible solution. In any app (desktop or web), ultimately, if the correct time zone is vital, then you must ask or confirm the desired/expected time zone with the user. And it may be wise to always indicate somewhere on your user interface what time zone is being used by your app.
If you need to exchange date-time values between your Java backend and JavaScript code in the front-end, you have two choices primarily:
ISO 8601
Count-from-epoch
ISO 8601
The ISO 8601 standard defines a variety of textual formats for exchanging date-time values. These are wisely designed to avoid ambiguity. They are easy to parse by machine, and easy to read by humans across cultures.
The java.time classes use these formats by default when generating/parsing strings.
Count-from-Epoch
I do not recommend this approach, as it is confusing and error-prone, subject to ambiguity and incorrect assumptions between the people and libraries who are sending or receiving.
An epoch reference date is a point in time used as baseline. Then some count forward or backward is made of some granularity.
One big problem is that there are dozens of epoch references used by various systems. The java.time classes by default use the Unix time epoch of first moment of 1970 in UTC, 1970-01-01T00:00Z.
Another problem is that there are many granularities such as whole seconds, milliseconds, microseconds, and nanoseconds. Programmers must document/communicate clearly what granularity is in play.
If you were to be sending your three opening moments for your three stores to JavaScript as a count-from-epoch, you would be sending three different numbers.
long millisecondsSeattle = zdtSeattle.toInstant().toEpochMilli() ;
long millisecondsChicago = zdtChicago.toInstant().toEpochMilli() ;
long millisecondsLondon = zdtLondon.toInstant().toEpochMilli() ;
Results in three different numbers for three different moments.
About java.time
The java.time framework is built into Java 8 and later. These classes supplant the troublesome old legacy date-time classes such as java.util.Date, Calendar, & SimpleDateFormat.
The Joda-Time project, now in maintenance mode, advises migration to the java.time classes.
To learn more, see the Oracle Tutorial. And search Stack Overflow for many examples and explanations. Specification is JSR 310.
You may exchange java.time objects directly with your database. Use a JDBC driver compliant with JDBC 4.2 or later. No need for strings, no need for java.sql.* classes.
Where to obtain the java.time classes?
Java SE 8, Java SE 9, Java SE 10, Java SE 11, and later - Part of the standard Java API with a bundled implementation.
Java 9 adds some minor features and fixes.
Java SE 6 and Java SE 7
Most of the java.time functionality is back-ported to Java 6 & 7 in ThreeTen-Backport.
Android
Later versions of Android bundle implementations of the java.time classes.
For earlier Android (<26), the ThreeTenABP project adapts ThreeTen-Backport (mentioned above). See How to use ThreeTenABP….
The ThreeTen-Extra project extends java.time with additional classes. This project is a proving ground for possible future additions to java.time. You may find some useful classes here such as Interval, YearWeek, YearQuarter, and more.

You do not need to capture the user's local time, but merely their IANA time zone identifier, such as "America/Los_Angeles". This can then be used in your Java back-end code in APIs that accept a time zone.
In most modern browsers, you can capture the the time zone id like this:
Intl.DateTimeFormat().resolvedOptions().timeZone
If you require supporting older browsers, there are several libraries that will use this Intl API when available, but will fall back to an educated guess when not. More on this here.

Momentjs utc() working differently on local (Mac) and server (Ubuntu)

Trying to figure out if this is an actual bug or a fundamental gap in understanding moment.js utc() method on my part.
When the method is used to convert an existing time/date string it returns an incorrect result on Ubuntu only
using moment#2.22.2
On Ubuntu 16.04.4 LTS
> moment().utc().format()
'2018-11-10T16:30:28Z'
> moment('2018-11-13 19:00:00').utc().format()
'2018-11-13T19:00:00Z'
On Mac OsX 10.13.2
> moment().utc().format()
'2018-11-10T16:29:24Z'
> moment('2018-11-13 19:00:00').utc().format()
'2018-11-14T00:00:00Z'

Moment interprets your string as a local time. Your Ubuntu machine's time zone is set to UTC, so it reads "2018-11-13 19:00:00" as a UTC time, and converting it to UTC in your code is a noop. Your Mac is on your local time, so it interprets the string as having been expressed in whatever time zone you're in, and then utc() translates it to UTC time. So you get different results.
If you want Moment to know that the string is expressed in UTC, you need to tell it that, for example by using ISO's "Z" (e.g. '2018-11-13T19:00:00Z') or by using moment.utc("2018-11-13 19:00:00", format)

Try to provide the format in which data string is
console.log(moment('2018-11-13 19:00:00','YYYY-MM-DD h:mm:ss').utc().format())

Chrome timeZone option to Date.toLocaleString()

I have recently discovered that there is a new extension to JavaScript. This adds several features to the Date object in the toLocaleString, toLocaleDateString and toLocaleTimeString functions. Reference here.
I am particularly interested in the timeZone option, that supports IANA/Olson time zones, such as America/New_York or Europe/London. This is currently only supported in Google Chrome.
Previous advice was that to work in JavaScript with any other time zone than UTC or your own local time zone, one had to use a library. But now, it appears that this is starting to be incorporated directly into the browser. So now you can do this:
new Date().toLocaleString("en-US", {timeZone: "America/New_York"})
// output: "7/4/2013 5:15:45 PM"
Or:
new Date().toLocaleString("en-NZ", {timeZone: "Pacific/Chatham",
timeZoneName: "long"})
// output: "7/5/2013 9:59:52 AM GMT+12:45"
Or:
new Date().toLocaleString("en-GB", {timeZone: "Europe/London",
timeZoneName: "short"})
// output: "4/7/2013 22:18:57 United Kingdom Time"
// (strange time zone name, but ok)
This is very cool, but I have a few questions:
Is this part of a new standard? Perhaps buried somewhere in ECMAScript 6? Or is it just something custom to Chrome?
Why just Google Chrome? Is it supported anywhere else? Are there plans to supported it anywhere else?
I checked node.js, which uses Chrome's JavaScript runtime, but it doesn't work there. Why not?
Is the time zone data accessible in any other way than the functions I listed? If only available when formatting strings, then doing any calculations based on the results may be difficult.
This is focused on output, but how would I use it for input? Is there a way to pass the time zone in the constructor to the Date object? I tried the following:
// parsing it with a date and time
new Date("2013-01-01 12:34:56 America/New_York")
// passing it as a named option
new Date(2013,0,1,12,34,56,{timeZone:"America/New_York"})
Neither worked. I couldn't find anything in the specs, so I don't think this exists (yet), but please tell me if I am wrong.
The issue described in this post, created by a flaw in the ECMAScript 5 spec, still affects the output, even when the correct data is in the TZDB. How is it that both old and new implementations are coexisting? One would think it would be all the old way, or all the new way. For example, with my computer's time zone set to US Eastern Time:
new Date(2004,10,7,0,0).toLocaleString("en-US",{timeZone:"America/New_York"})
returns "11/6/2004 11:00:00 PM". It should return midnight, since I started at midnight and my local time zone matches the output time zone. But it places the provided input date at the wrong UTC point due to the ES5 issue.
Can I expect that as IANA releases updates to the TZDB that Google will push Chrome updates that contain the changes?

update
There is pretty extensive write-up about the API here
Is this part of a new standard? Perhaps buried somewhere in ECMAScript
6? Or is it just something custom to Chrome?
Yes, these are part of the ECMAScript Internationalization API. It is implemented separate from ECMAScript, but the requirement of implementing ECMAScript Internationalization API is to first have correct implementation of ECMAScript 5.1
Why just Google Chrome? Is it supported anywhere else? Are there plans
to supported it anywhere else?
For the recent years, Google Chrome has mostly been first to implement new features. Mozilla is more conservative, still for example discussing whether to implement the download attribute of a elements. It is now available in IE11 Beta and Opera too. It will be available in Firefox 25.
I checked node.js, which uses Chrome's JavaScript runtime, but it
doesn't work there. Why not?
node.js just uses the same engine, which is a separate project from the Google Chrome browser. The engine just implements Ecmascript 5.1. This is an extension node.js would have to implement separately right now. It will become available in V8 in Q3 so probably a bit after that you can use it in node.js.
This is focused on output, but how would I use it for input? Is there
a way to pass the time zone in the constructor to the Date object? I
tried the following:
There is nothing about inputting dates in the specification. I personally cannot see how this would be useful, you are doing it wrong if you are not transmitting UTC timestamps because something like "2013-01-01 12:34:56 America/New_York" is ambiguous during transitions from DST to standard time.
The issue described in this post, created by a flaw in the ECMAScript
5 spec, still affects the output, even when the correct data is in the
TZDB.
This is input issue, not output. Again, constructing a date with local timezone that you cannot influence or detect is doing it wrong. Use the timestamp constructor overload or Date.UTC.
Can I expect that as IANA releases updates to the TZDB that Google
will push Chrome updates that contain the changes?
Nothing in the spec but I think it will be reasonable to expect that the rules are not too much behind.

Is this part of a new standard? Perhaps buried somewhere in ECMAScript
6? Or is it just something custom to Chrome?
Indeed it is part of the new ECMA-402 standard. The standard is very difficult to read, but there is this friendly introduction.
Why just Google Chrome? Is it supported anywhere else? Are there plans
to supported it anywhere else?
MDN has a list of supporting browsers. According to Bug 853301 it will be available in Firefox 25.
I checked node.js, which uses Chrome's JavaScript runtime, but it doesn't work there. Why not?
Possible reasons are many; it is not up to the current code base, or it would make the node.js bigger and slower (the previous bug tracker entry from Mozilla indicates that the timezone data increased the download size of Firefox by 10 %, and caused the I/O to increase substantially during browser start up.
Is the time zone data accessible in any other way than the functions I listed? If only
available when formatting strings, then doing any calculations based on the results may be
difficult.
Seems that it is not available. Furthermore, the Intl API primer talks that only UTC and local time zone are absolutely required to be supported.
This is focused on output, but how would I use it for input? Is there a way to pass
the time zone in the constructor to the Date object? I tried the following:
The Intl API only speaks about date/time formatting, string collations and number formatting. The datetime formatting not only supports the Gregorian calendar but also many kinds of other calendars, lunar, lunisolar and so forth.
The issue described in this post, created by a flaw in the ECMAScript 5 spec, still affects
the output, even when the correct data is in the TZDB. How is it that both old and new
implementations are coexisting? One would think it would be all the old way, or all the new
way. For example, with my computer's time zone set to US Eastern Time:
new Date(2004,10,7,0,0).toLocaleString("en-US",{timeZone:"America/New_York"})
returns "11/6/2004 11:00:00 PM". It should return midnight, since I started at midnight and > my local time zone matches the output time zone. But it places the provided input date at the > wrong UTC point due to the ES5 issue.
The reason for that is that ES5 mandates that the input to new Date be calculated using the current DST and offset, that is it is America/New York but with EDT timezone, even though Nov 6 is not in EDT. Obviously as this is so specified, then it cannot be changed. However, as Chrome is using the TZDB to do the conversion from the bare UTC point-in-time value to the America/New York tz, it then does consider the time as being in EST.
Can I expect that as IANA releases updates to the TZDB that Google will push Chrome updates
that contain the changes?
I'd believe so

What does the ".000Z" of "yyyy-mm-ddT00:00:00.000Z" mean?

I've gotten a response from one application with the following date & time format:
yyyy-mm-ddT00:00:00.000Z
I need date and time for a report I have to present. What does the .000Z mean? What do I need to do to get the time according to a region using javascript?

.000 is the fraction of a second and Z indicates UTC timezone.
How you convert to your local time will depend on which programming language you prefer, but for example Perl has standard modules for parsing and formatting times.