Javascript Date is not formatting correctly using `toLocaleString` - javascript

I am trying to format date in 'MM/dd/yyyy' (short date format) using toLocaleString function of javascript Date. But it is not giving expected result when I change my timezone. Bellow is snippet of my code
var d1 = new Date(1954, 0, 1); // Fri Jan 01 1954 00:00:00 GMT-0900 (AKST)
var options = {
year: 'numeric',
month: '2-digit',
day: '2-digit'
};
var shortDate = d1.toLocaleString('en-US', options);
console.log(shortDate);
Above code prints 12/31/1953 instead of expected result which is 01/01/1954.
Observations/Steps:
Change timezone of local machine to Whitehorse - Canada(Pacific DayLight Time).
Run above code snippet to replicate result.
It only gets reproduced for year value less than 1968 (works fine for years greater than 1968)
For reference, uploaded recording for it (http://recordit.co/cdWMgWFLKJ)

local date time function is a conversion from UTC to locale date time. You need to change UTC time first.
so use this.
var d1 = new Date(Date.UTC(1954, 0, 1)); // Fri Jan 01 1954 00:00:00 GMT-0900 (AKST)
var options = {
year: 'numeric',
month: '2-digit',
day: '2-digit'
};
var shortDate = d1.toLocaleString('en-US', options);
console.log(shortDate);

Related

Javascript: How do I get the locale string to reflect the local browser time zone and not UTC on the front end? [duplicate]

This question already has answers here:
How to initialize a JavaScript Date to a particular time zone
(20 answers)
Closed 4 months ago.
I have a dateTime object that I'm using to reflect the status of an item. Below is the code I have for the object:
let status = new Date(Date.parse(dateTime)).toLocaleString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute:'2-digit'}))
Currently status returns, regardless of timezone: 10/19/2022, 10:13 PM
I am in US Central Time. When I console.log
new Date(Date.parse(dateTime))
I get Wed Oct 19 2022 22:13:00 GMT-0500 (Central Daylight Time).
However when I change my computer's time to US Eastern Time, I get:
Wed Oct 19 2022 22:13:00 GMT-0400 (Eastern Daylight Time).
This is not correct. I'm expecting Eastern Time to show 11:13 PM or 23:13:00. How should I modify the code to reflect the actual local browser time?
I actually figured this out with the help of this demo.
Now my code reads:
let dateTime = '2022-10-19T22:13:17';
let dateInUTC = new Date(Date.parse(dateTime)).toLocaleString() + ' UTC';
let localDate = new Date(dateInUTC);
let status = localDate.toLocaleString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
console.log(status);
If I console.log status, I get 10/19/2022, 05:13 PM. If I change my computer's time zone to Eastern, I get 10/19/2022, 06:13 PM. This is the desired result.

Javascript Date object keeps on returning the default date (Mon Jan 19 1970 19:18:18) when trying to convert unix time [duplicate]

This question already has answers here:
Convert a Unix timestamp to time in JavaScript
(34 answers)
Getting incorrect dates converting timestamp with new Date
(2 answers)
Convert UNIX timestamp to date time (javascript)
(4 answers)
Closed last year.
I am trying to use the date function to convert unix time that I am trying to convert to a certain format. The function successfully returns the date in the format requested, but the time is wrong. What am I missing here?
const date = (e) => {
const unixTime = 1642698000
const format = {
weekday: 'long',
day: 'numeric',
month: "2-digit",
year: "numeric"
}
return(new Date (unixTime).toLocaleString('en-US', format))
}
Expected output (app.)
Tue Jan 18 2022 17:00:00
The output recieved
Mon Jan 19 1970 19:18:18 GMT-0500 (Eastern Standard Time)
I tried following other exampled but I wasn't able to find any that would resolve this issue. I appreciate your help in advance!
The Date constructor from Javascript accepts the number of milliseconds as timestamp, not unix time (number of seconds). So, to adjust that, is just multiply the unix time by 1000.
const date = () => {
const unixTime = 1642698000 * 1000
const format = {
weekday: 'long',
day: 'numeric',
month: "2-digit",
year: "numeric"
}
return(new Date (unixTime).toLocaleString('en-US', format))
}
console.log(date())
// logs Thursday, 01/20/2022

Intl.DateTimeFormat returns an hour over 24

I have the following Unix timestamp: 1611328500000 (Fri Jan 22 2021 10:15:00 GMT-0500 (Eastern Standard Time)).
I need to display it in Korean Standard Time. To do so, I'm using Intl.DateTimeFormat. However, for some reason, the result I'm getting is 24:15 when I attempt to format it. Unless I'm delusional, I'm pretty sure that's higher than a 24-hour clock usually goes (0:00 to 23:59).
Google tells me my result should be 0:15, obviously on the following date (Sat Jan 22).
Here's a minimal working example:
const date = new Date(1611328500000);
const timeOptions = {
hour12: false,
hour: '2-digit',
minute: '2-digit'
};
const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: 'Asia/Seoul', ...timeOptions
});
console.log(formatter.format(date));
Am I crazy? Can times go up to 24:15 in some circumstances? What is happening here?
EDIT: I just found this page which seems to be experiencing a similar problem. The answer provided there points me towards something called hourCycle, with a link to MDN's Intl.DateTimeFormat.
However, hourCycle only appears once on that page, in the browser support section. Adding the suggested hourCycle: h11 to my timeOptions did not work.
Digging further, I found this page, which lists h23 as a valid option. Surely this is what I'm after! But, alas... my result is still 24:15.
Switch from hour12: true to hourCycle: 'h23' to display the hours from 00:00 to 23:59.
const date = new Date(1611328500000);
const timeOptions = {
hourCycle: 'h23',
hour: '2-digit',
minute: '2-digit'
};
const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: 'Asia/Seoul', ...timeOptions
});
console.log(formatter.format(date));
I used the below code and it worked to transform the input 3000000 milliseconds to the output 00:50:00.000Z
const dateInMilliseconds = 3000000
const formatterConfig = {
hour: "numeric",
minute: "numeric",
second: "numeric",
hourCycle: "h23",
timeZone: "UTC",
fractionalSecondDigits: 3
}
const dateInFormat = new Intl.DateTimeFormat([], formatterConfig).format(dateInMilliseconds)+'Z';
// 00:50:00.000Z

React format string date to date format timzone

When I call my function:
formatDate(new Date("2020-06-08T10:37:05.915+0000")
function formatDate(tstamp) {
return new Intl.DateTimeFormat("en-GB", {
year: "numeric",month: "2-digit",day: "2-digit",
hour: "2-digit", minute: "2-digit",second: "2-digit"
}).format(tstamp);
}
My output is: 08/06/2020, 12:37:05
why I got (12:37:05) instead (10:37:05) my timezone is GMT+2.
It is because the input is GMT+0000 and you are GMT+0200 which is 2 hours ahead Greenwich Mean Time. The format method formats a date without changing its time value.

how can i change Date picker calendar (javascript)

I changed computer's culture and date to non-Gregorian (Thai) calendar but JavaScript (new Date) keeps giving me the Gregorian date.
Before you start check out for toLocaleDateString method, I will use it in example later.
For different languages:
"en-US": For English "
hi-IN": For Hindi
"ja-JP": For Japanese
You can use more language options.
Take a look at this code example:
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today = new Date();
console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

Categories

Resources