How to guess user's timezone using date-fns? - javascript

I have a requirement, where I need to show a user's time in their local time zone. This needs to be done using date-fns.
The following code checks the current time and then given a timezone converts it into local time as per the time zone.
const { formatToTimeZone } = require('date-fns-timezone')
let date = new Date()
const format = 'D.M.YYYY HH:mm:ss [GMT]Z (z)'
const output = formatToTimeZone(date, format, { timeZone: 'Asia/Calcutta' })
However, how do I guess the user's timezone on the fly?
In moment.js, you can get it with moment.tz.guess(). But how can I do it without moment.js and by using date-fns?
https://runkit.com/embed/835tsn9a87so
UPDATE: I will be using this inside a VueJS application. So, if there are any other related solutions, those are welcomed as well. Thanks.

To get the user's IANA time zone identifier, most modern browsers now support the following:
Intl.DateTimeFormat().resolvedOptions().timeZone
That said, the usual reason you would need to use formatToTimeZone from date-fns-timezone is when you need to use a different time zone other than the user's local zone. Otherwise, you can usually just use the format function from date-fns.
However, in your case, you are also trying to use the z format specifier to display the user's time zone abbreviation. This isn't provided by date-fns directly, so if that is critical then you will indeed need to get the user's time zone with the Intl api shown above and use formatToTimeZone.
Do keep in mind though that these abbreviations are whatever the IANA data has recorded, which are in English only, and it doesn't have abbreviations for every time zone. For those that don't, you will see a numeric value instead, such as -02.
Also, many abbreviations can be ambiguous (such as the I in IST possibly meaning India, Israel, or Ireland, and many others...). Thus, in most cases, if you don't need the abbreviation, you're often better off without it.

Just solved a similar problem myself. The trick is to use the format function from date-fns-tz instead of the one from date-fns.
import { format } from "date-fns";
console.log(format(new Date(), "yyyy-MM-dd HH:mm z"));
// 2021-11-29 13:55 GMT-8
import { format } from "date-fns-tz";
console.log(format(new Date(), "yyyy-MM-dd HH:mm z"));
// 2021-11-29 13:55 PST
See documentation here:
https://date-fns.org/v2.27.0/docs/Time-Zones

Related

AWS Lambda different date result using moment JS

My time zone is GMT+8. and my AWS region is Singapore (ap-southeast-1)
My concern is they have different results when calculating dates, when i deployed my code in aws/lambda, i got different result from my local machine. what I want to achieve or my goal is that the AWS Lambda will have a same result like in my local
my local result: 2023-04-05T16:00:00.000Z
lambda result: 2023-04-06T00:00:00.000Z
code:
const moment = require('moment');
const dateToday = new Date();
const today = dateToday.toLocaleDateString();
const accumulatedDate = moment.utc(new Date(today)).add(118, 'days').toISOString();
console.log(accumulatedDate);
The toLocaleDateString() method returns a string with a language-sensitive representation of the date portion of the specified date in the user agent's timezone.
I think the issue is that you are converting your local timestamp to be represented as UTC, rather than just using UTC.
The toUTCString() method converts a date to a string, interpreting it in the UTC time zone.
You're seeing this result because toLocaleDateString() truncates the time. But "truncate the time" is inherently a timezone-sensitive operation. If you convert a date+time to a date, you need to decide which time zone's midnight you're going to use to truncate the time.
For example, assume a time like 2000-01-01T04:00Z. In New York (UTC-5), toLocaleDateString('en-US') would return '12/31/1999' (which, when converted to UTC, is 1999-12-31T05:00Z). While in London it'd return '2000-01-01' (which, when converted to UTC, is 2000-01-01T00:00Z).
If you want to get the same result on your local machine as on the server, then you'll need to use the same time zone in both places. Which time zone you use depends on the use cases of your app. For example, if you want to report on "Sales made yesterday at our store in Shanghai" then you'll probably want to use the Asia/Shanghai time zone. If you are writing to a log file, then you'll probably want to use UTC. If you're summarizing revenue for a multinational corporation headquartered in Marseille, then you'll probably want to use Europe/Paris. And so on.
BTW, instead of moment.js. you may want to look at Temporal, which is a new JavaScript built-in object that will be shipping in browsers and Node.js soon, likely within the next year or so. Temporal is the successor API to JavaScript's venerable Date object, and it has first-class support for time zones and date/time arithmetic. There are Temporal polyfills available now. (Full disclosure: for the last few years I helped to lead the team that designed the Temporal API.)
Using Temporal, your code could look something like this:
import { Temporal } from '#js-temporal/polyfill';
// If you want to use UTC
const today = Temporal.Now.plainDateISO('UTC'); // 2022-12-14
const accumulatedDate = today.add({ days: 118 }).toString(); // 2023-04-11
// If you want to use a specific time zone
const today = Temporal.Now.plainDateISO('Asia/Singapore'); // 2022-12-15
const accumulatedDate = today.add({ days: 118 }).toString(); // 2023-04-12

How can use "Romance Standard Time" to set the time zone?

I have the UTC date string "2022-01-06T13:35:00Z" and the time zone string "Romance Standard Time". How can use that time zone string in JavaScript (in a browser) so that I can get the time corrected to 14:35?
The time zone libraries that I have found so far uses the IANA time zone, e.g. "Europe/Copenhagen", so a library that can convert "Romance Standard Time" to something like "Europe/Paris" would also answer my question. It's acceptable that this conversion is done in .NET and not JavaScript.
The key was to understand that "Romance Standard Time" is a Windows time zone ID. Everyone else uses IANA time zone IDs. They have the region/city format, e.g. "Europe/Copenhagen".
In .NET 6 it's possible to convert between the formats. Here's the code example from Date, Time, and Time Zone Enhancements in .NET 6.
// Conversion from Windows to IANA when a region is unknown.
string windowsTimeZoneId = "Eastern Standard Time";
if (!TimeZoneInfo.TryConvertWindowsIdToIanaId(
windowsTimeZoneId, out string ianaTimeZoneId))
{
throw new TimeZoneNotFoundException(
$"No IANA time zone found for "{windowsTimeZoneId}".");
}
Console.WriteLine($"{windowsTimeZoneId} => {ianaTimeZoneId}");
// "Eastern Standard Time => America/New_York"
// Conversion from Windows to IANA when a region is known.
string windowsTimeZoneId = "Eastern Standard Time";
string region = "CA"; // Canada
if (!TimeZoneInfo.TryConvertWindowsIdToIanaId(
windowsTimeZoneId, region, out string ianaTimeZoneId))
{
throw new TimeZoneNotFoundException(
$"No IANA time zone found for "{windowsTimeZoneId}" in "{region}".");
}
Console.WriteLine($"{windowsTimeZoneId} + {region} => {ianaTimeZoneId}");
// "Eastern Standard Time + CA => America/Toronto"
If you're on an earlier version of .NET you can use TimeZoneConverter. Here's a complete list of the time zones in case you need to build your own converter: windowsZones.json.
This answer to this questions suggests using NodaTime, so that is probably also a possibility: Convert Windows timezone to moment.js timezone?
JavaScript
If you want to do it with Javascript, there is multiple Libraries. I am most familiar with moment.js, however they are deprecated, which means you might want to use another library if you are working on a new project.
List of suggested libraries by moment.js.
Anyways, if you wish to work with moment and convert to timezones, you could easily do that using Moment-Timezone. All supported timezones.
For example:
const moment = require('moment-timezone');
const timeZone = "Europe/Paris";
const ISOString = "2022-01-06T13:35:00Z"; //2022-01-06T13:35:00Z
const momentDefault = moment(ISOString).format(); //2022-01-06T14:35:00+01:00
const momentTz = moment.utc(ISOString).tz(timeZone).format(); //2022-01-06T14:35:00+01:00
As you see, moment gets the timezone by default and handels the ISOString as a UTC value, so it automatically converts the value to the timezone of the client user.
You still can specifically tell moment to handle the ISOString as a UTC ISOString and then convert it to a specific Timezone you defined. In that way the client's timezone will be ignored.
EDIT:
Now I realized that the questioner wants to convert the timezone from Windows to Iana before converting it in Javascript, because most libraries including Moment.js don't support windows timezone ids.
I found a nice library here.
And here is an example how to convert the timezone first and then use moment.js.
import { findIana } from 'windows-iana';
const moment = require('moment-timezone');
const result = findIana('Romance Standard Time');
console.log(result); // ['Europe/Paris', 'Europe/Brussels', 'Europe/Copenhagen', 'Europe/Madrid', 'Africa/Ceuta']
const timeZone = result[0]; //doesn't really matter which one to take, if you are just converting the times.
const ISOString = "2022-01-06T13:35:00Z"; //2022-01-06T13:35:00Z
const momentDefault = moment(ISOString).format(); //2022-01-06T14:35:00+01:00
const momentTz = moment.utc(ISOString).tz(timeZone).format(); //2022-01-06T14:35:00+01:00
.NET C#
To convert a time to a specific timezone in C#, you dont need any extra packages, you can simply do that as following:
var isoString = "2022-01-06T13:35:00Z";
var utcDate= DateTime.Parse(isoString);
var timeZone = "Romance Standard Time";
var date = TimeZoneInfo.ConvertTime(utcDate, TimeZoneInfo.FindSystemTimeZoneById(timeZone)); //01/06/2022 14:35:00
Here you can find list of all supported timezoneIds

How to make Moment.js ignore the user's timezone?

I've got a form where I input an event that starts at a certain time. Let's say 9am.
To assign a date/time object I'm using MomentJs. The issue comes when displaying it in different time-zones.
In London will show up 9am as intended - in Kiev will show 11am.
How can I make MomentJS and the browser ignore which timezone is relevant for the user, and just displaying the time I'm giving?
Here's my code:
<p>
Start time:
{moment(event.startDate).format("HH:mm")}
</p>
Assuming you have stored the date as utc (which in this case you probably should have), you could use the following:
moment.utc(event.startDate).format("HH:mm")
Let me provide an alternative answer in Vanilla JavaScript. If you want to make it timezone 'neutral', you can first convert it to UTC using toISOString().
const current = new Date();
const utcCurrent = current.toISOString();
console.log(utcCurrent);
If you want to convert it to a specific timezone, such as London, you can use toLocaleString(). Do take note of the browser support for the timezone though.
const londonTime = new Date().toLocaleString('en-US', { timeZone: 'Europe/London' })
console.log(londonTime);
What you want is a normalized Datetime. This can get a little confusing since the concept of timezones is a rather arbitrary construct.
I like to think of Datetime values as "absolute" and "relative". An "absolute" Datetime is one that is true regardless of which timezone you're in. The most common example of these are UTC(+000) and UNIX Time (also known as Unix epoch, POSIX Time or Unix Timestampe).
UTC is pretty obvious. Its the current time at +000 timezone. UNIX time is a bit more interesting. It represents the number of seconds that have elapsed since January 1, 1970.
You should always store data, in both client and backend, as an "absolute" time. My preference is UNIX time since its represented as a single integer (nice and clean).
moment.js does this for you. When you instantiate your moment object, you can use:
var date = moment.utc(utcString)
or for Unix Time
var date = moment.unix(unixInt)
You can then use this object to display the date in any form you wish:
console.log(date.tz.("America/Toronto"))
The only way I could solve this is by removing the timezone and milliseconds info from the string. I used date-fns lib but I imagine moment will work the same way.
import { format } from 'date-fns'
const myDateTimeString = '2022-02-22T19:55:00.000+01:00'
const dateTimeWithoutTimezone = myDateTimeString.slice(0, 16) // <- 2022-02-22T19:55
format(new Date(dateTimeWithoutTimezone), 'HH:mm')

Moment.js - Anywhere in the world, use the same Timezone

I found a couple other posts but they didn't have something specific to what I was looking for.
Here's the scenario:
A user in China (although it could be anywhere in the world) inputs a date time into a field that represents a local time in the U.S. So even though their local machine might be 1:11 AM 02/15/2018 in Beijing, the user is entering a date in Austin, TX for 11:11 AM 02/14/2018 into the date time field.
This is the string I'm pulling from the input field:
'2018-02-14T11:11'
How can I use moment.js to make sure that when I convert '2018-02-14T11:11' to UTC, the UTC string always reflects Austin time, not Beijing time? At the end of the day, we won't know which timezone the user is from, but we will always know the entered timezone will be in Central Standard Time.
What seems to be happening with the below is that when I use these to convert to UTC, the dates are still not reflecting CST, or they are offset incorrectly by several hours.
moment('2018-02-14T11:11').zone("America/Chicago").format()
moment('2018-02-14T11:11').tz("America/Chicago").format()
moment('2018-02-14T11:11', 'CST').tz("America/Chicago").format()
moment('2018-02-14T11:11', "America/Chicago").tz("America/Chicago").format()
To UTC:
moment.utc('2018-02-14T11:11').tz("America/Chicago").toISOString()
I'm definitely missing something. Any advice would be appreciated!
Thanks in advance!
You're close - you will need the Moment-Timezone addon, and then it's like this:
moment.tz('2018-02-14T11:11', "America/Chicago").utc().format()
Let's break that down:
// create the moment with a specific time zone
var m = moment.tz('2018-02-14T11:11', "America/Chicago");
// convert to UTC
m.utc();
// format the output
var s = m.format();
Just add another scenario that I got:
Parse '2018-02-14Z', but ignore 'Z' (UTC), just use local time zone or a specified timezone.
You can simply remove 'Z' from the string or do these:
moment('2018-02-14Z', 'YYYY-MM-DD') will ignore 'Z' or any unmatched characters.
moment.tz('2018-02-14Z', 'YYYY-MM-DD', 'America/Chicago') will use the given timezone.
Of course, you should not do this in the first place. A correct timezone should be used.

Convert hour to date time without adding +1

Hi im using moment js to convert this string 20:00 I tried:
var a = moment("20:00", "HH:mm")
console.log(a.format()) // 2016-09-08T20:00:00+01:00
the problem when I store in mongodb it become
2016-09-10T19:00:00.000Z
I want to store 2016-09-10T20:00:00.000Z
anyway can explain why please ?
When you say that you want to store 2016-09-10T20:00:00.000Z what you are saying is that you want to assume that your date and time is UTC.
To assume that the date you are parsing is a UTC value, use moment.utc
var a = moment.utc("20:00", "HH:mm")
console.log(a.format()) // 2016-09-08T20:00:00Z
Note that when you parse a time without a date, moment assumes the current date. This may not be the behavior that you want.
I'm also not sure if you want a UTC date (which is what you are saying), or a local date without an offset indicator. If you want a local date without an offset indicator, simply use a format without an offset:
moment.utc("20:00", "HH:mm").format('YYYY-MM-DDTHH:mm:ss.SSS')
"2016-09-08T20:00:00.000"
If you are dealing with local dates that do not have a time zone association, I recommend using moment.utc to parse, as this will ensure that the time does not get shifted to account for DST in the current time zone.
For more information about how to parse dates into the time zone or offset that you would like in moment, see my blog post on the subject.
This it how it should look:
var a = moment("20:00", "HH:mm")
console.log(a.utcOffset('+0000').format())
<script src="http://momentjs.com/downloads/moment.min.js"></script>
Doe, the problem is that you are using timezones when you create the date.
MomentJS uses your current timezone automatically.
Mongo however saves the time as it would be in another timezone.
Therefore, if you want the two strings to format the same way, you need to set the timezone.

Categories

Resources