Develop Reference

Is there a way to swap dayweek and date, when formatting a date in JavaScript?

I've formatted my date like below, but I would like the weekday to go after the DD/MM/YYYY. Is this possible?
Current output: Friday, 16/06/2023, 12:00
Desired output: 16/06/2023, Friday, 12:00
const options = {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
};
const dt = new Date('2023-06-16T12:00:00Z').toLocaleDateString('en-GB', options)
console.log(dt)

You can do by custom code format of required output.
In your case to acheive desired result this code help you.
const options = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
hour: 'numeric',
minute: 'numeric',
};
const dt = new Date('2023-06-16T12:00:00Z');
const formattedDate = `${dt.toLocaleDateString('en-GB', {
year: 'numeric',
month: 'numeric',
day: 'numeric',
})}, ${dt.toLocaleDateString('en-GB', {
weekday: 'long',
})}, ${dt.toLocaleTimeString('en-GB', {
hour: 'numeric',
minute: 'numeric',
})}`;
console.log(formattedDate);

get new Date() in other timezone in full text string format

I need to get Thailand timezone in this format: Thu Nov 10 2022 14:08:37 GMT+0800 (Malaysia Time). I have tried new Date().toLocaleString("en-US", {timeZone: "Asia/Bangkok"}) but didn't get the correct format I want, probably because of the .toLocaleString(). Is there a simple way to do it?

As deceze suggests, you can use Intl.DateTimeFormat with suitable options to get the values you want. Then you can use formatToParts to reorganise them as you wish, e.g. to replicate the format of Date.prototype.toString for any timezone, you can use:
// Return timestamp in same format as Date.prototype.toString
// in designated timezone (IANA representative location)
function toTimezone(tz, date = new Date()) {
// Get parts except timezone name
let opts = {
year: 'numeric',
month: 'short',
day: '2-digit',
weekday: 'short',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZone: tz,
timeZoneName: 'shortOffset',
hour12: false
}
// To get full timezone name
let opts2 = {
hour: 'numeric',
timeZone: tz,
timeZoneName: 'long'
}
let toParts = opts => new Intl.DateTimeFormat('en', opts)
.formatToParts(date)
.reduce((acc, part) => {
acc[part.type] = part.value;
return acc;
}, Object.create(null));
let {year, month, day, weekday, hour, minute,
second, timeZoneName} = toParts(opts);
// Fix offset
let sign = /\+/.test(timeZoneName)? '+' : '-';
let [oH, oM] = timeZoneName.substr(4).split(':');
let offset = `GMT${sign}${oH.padStart(2, '0')}${oM || '00'}`;
// Get timezone name
timeZoneName = toParts(opts2).timeZoneName;
return `${weekday} ${month} ${day} ${year} ${hour}:${minute}:${second} ${offset} (${timeZoneName})`;
}
// Examples
['Australia/Adelaide',
'Asia/Bangkok',
'Asia/Kolkata',
'America/New_York',
'Pacific/Yap',
'Pacific/Pago_Pago'
].forEach(tz => console.log(toTimezone(tz)));
Support for some options like shortOffset may not be ubiquitous yet. A formatting library with timezone support is a simpler (and more reliable) option. :-)

You can configure the locale string formatter with a whole bunch of options:
console.log(new Date().toLocaleString('en-US', {
timeZone: 'Asia/Bangkok',
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'short',
hour12: false
}));
However, the exact format it will output will always be dependent on the locale used and the browser's understanding of how dates should be formatted for that locale. If you want more control over the exact formatting, you'll need to cobble it together yourself:
const date = new Date();
const time = date.toLocaleString('en-US', {
timeZone: 'Asia/Bangkok',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'short',
hour12: false
});
const weekday = date.toLocaleString('en-US', {
timeZone: 'Asia/Bangkok',
weekday: 'short'
});
console.log(`${weekday} ${date.getFullYear()} ... ${time}`);
If that seems too complicated, use some 3rd party library like Luxon, which can simplify that a bit.

How to get timeZoneName as EST instead of EDT and GMT

I have requirement where i want want to show time in EST like 03:32:11 PM EST,
i tried keeping the timeZone as America/New_York but it is returning the time in EDT format
const date = new Date();
date.toLocaleString('en-US', {
timeZone: 'America/New_York',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZoneName: 'short',
}),
output //10/21/2022, 04:32:19 PM EDT
date.toLocaleString('en-US', {
timeZone: 'EST',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZoneName: 'short',
}),
);
output : 10/21/2022, 03:32:58 PM GMT-5
what should be the timezone to get timeZoneName as EST?

Why does the date format function return incorrect answer?

I need to format date. I use function Intl.DateTimeFormat but I don't understand why it does not format correctly fTime
Example:
const date = new Date()
console.log('Date:', date)
const dateOptions = { year: 'numeric', month: 'numeric', day: 'numeric' }
const timeOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
const fDate = new Intl.DateTimeFormat(dateOptions).format(date)
const fTime = new Intl.DateTimeFormat(timeOptions).format(date)
console.log('fDate:', fDate)
console.log('fTime:', fTime)
I'm expecting to get an answer like this ( in my case such 20:10:25 )

You're passing the options to the locales parameter. Even if locales is optional, it just means you don't need to supply a value for it; it doesn't mean you can try to skip it. If you don't want to supply a value for locales but for options, pass undefined instead:
const date = new Date()
console.log('Date:', date)
const dateOptions = { year: 'numeric', month: 'numeric', day: 'numeric' }
const timeOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
const fDate = new Intl.DateTimeFormat(undefined, dateOptions).format(date)
const fTime = new Intl.DateTimeFormat(undefined, timeOptions).format(date)
console.log('fDate:', fDate)
console.log('fTime:', fTime)

time components if UTC and time zone is known

I have a date time picker, which uses getHours, getMinutes,.. to initialize the value. It works well if timezone coincide with user location, but I want to consider the case where user tz is different than the current browser locale setting. I can use Intl.DateTimeFormat to correctly format the date into another timezone. But, I want to get the time component values (hour, minute,..) of say "America/Chicago" while my local time is "America/New_York". That is I need to get time as 17 if I set offset as "America/Chicago", irrespective of current local timezone . Is this possible without using moment.js, or any better way to do this.
https://jsfiddle.net/zhvx6mmt/1/
const baseUTCDate = new Date(Date.UTC(2017, 2, 1, 23, 0, 0));
function formatDate(date, timeZone, locale) {
const options = { weekday: 'long', year: 'numeric', month: 'short',
day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' };
return new Intl.DateTimeFormat(locale, Object.assign(options, {timeZone: timeZone})).format(date);
}
console.log(formatDate(baseUTCDate, "America/New_York", 'en-US'))
// Wednesday, Mar 1, 2017, 6:00 PM EST
console.log(formatDate(baseUTCDate, "America/Chicago", 'en-US'))
// Wednesday, Mar 1, 2017, 5:00 PM CST
console.log(baseUTCDate.getHours()) // 18 - local time zone is EST