Develop Reference

Displaying a date string without browser timezone in mm:dd:yyyy with javascript

If I am getting a date (without time, 'yyyy:mm:dd') as a string from the server ("2022-06-01"), the browser is showing 05/31/2022 when using new Date("06-01-2022").toLocaleDateString(). But if I remove the toLocaleDateString it's displaying as Wed Jun 01 2022 00:00:00 GMT-0400 (Eastern Daylight Time).
I want it to display it as it is in the payload, "06-01-2022", not in the browser's timezone. How do you create a Javascript date based on a string like "06-01-2022" and have it ignore the browser's timezone and display it as a literal "06-01-2022"? I haven't run into this situation before.

Something like this should work, since toLocalDateString returns a date you have to recreate the date to then get the format you need.
const = getFormattedDate = (date) => {
date = new Date(date)
var year = date.getFullYear();
var month = (1 + date.getMonth()).toString();
month = month.length > 1 ? month : '0' + month;
var day = date.getDate().toString();
day = day.length > 1 ? day : '0' + day;
return month + '-' + day + '-' + year;
}

First make sure you are absolutely clear what timezone the server value is for. The following answer assumes the server provides UTC (always a good idea when sending date and time over global Internet).
Proposed solution A:
Explicitly pass the server timezone (UTC=Z) to the Date() constructor
Use the toUTCString() method to get an internationally neutral string
Assume that toUTCString has the same exact field lengths in all locales
Example: Date("2022-06-01T00:00Z").toUTCString().substring(0,16)
Proposed solution B:
Fudge the date object to think the specified date is local to the users location
Keep the toLocaleDateString() method to get a text that is somewhat similar to the users local formatting rules.
Example: Date(2022,6-1,1).toLocaleDateString()

Time zone issue involving date fns format()

const dt = new Date('2017-12-12');
console.log(format(dt, 'YYYY-MM-DD'));
The above code logs 2017-12-11 in the US, but 2017-12-12 in India.
I followed this github thread here and tried out things but am not getting the desired results.
My expectation is to print the same date irrespective of time zone
Why I need this :
Consider a scenario involving birthdates. If i am giving some input date, it has to be displayed as same date in all regions irrespective of their timezones.

You will need to subtract the time zone offset of your local time zone from the Date instance, before you pass it to format from date-fns. For example:
const dt = new Date('2017-12-12');
const dtDateOnly = new Date(dt.valueOf() + dt.getTimezoneOffset() * 60 * 1000);
console.log(format(dtDateOnly, 'YYYY-MM-DD')); // Always "2017-12-12"
Problem
You want to handle only the date part of the Date instance, because the time part does not make sense for birthdates. However, the Date object does not offer any "date-only" mode. You can access both its date and time parts in the local time zone or UTC. The problem is, that format from date-fns prints the output always in the local time zone.
When you executed the constructor only with the date part:
const dt = new Date('2017-12-12');
The JavaScript engine actually assumed a string in the incomplete ISO 8601 format and perfomed this:
const dt = new Date('2017-12-12T00:00:00.000Z');
It may still look "harmless" to you, but the date instance exposes the value not only in UTC, but also in the local time zone. If you construct the Date instance on the East Coast of the US, you will see the following output:
> const dt = new Date('2017-12-12');
> dt.toISOString()
'2017-12-12T00:00:00.000Z'
> dt.toString()
'Tue Dec 11 2017 19:00:00 GMT-0500 (EST)'
> d.toLocaleString()
'12/11/2017 7:00:00 PM'
Solution
If you know, that format from date-fns reads date and time parts from the date instance in the local time zone, you will need to make your date "looking like" the midnight in your local time zone and not in UTC, which you passed to the Date constructor. Then you will see the year, month and date numbers preserved. It means, that you need to subtract the time zone offset of your local time zone for the specified day. Date.prototype.getTimezoneOffset returns the offset, but with an inverted sign and in minutes.
const dt = new Date('2017-12-12');
// Tue Dec 11 2017 19:00:00 GMT-0500 (EST)
const dtDateOnly = new Date(dt.valueOf() + dt.getTimezoneOffset() * 60 * 1000);
// Tue Dec 12 2017 00:00:00 GMT-0500 (EST)
console.log(format(dtDateOnly, 'YYYY-MM-DD'));
// Prints always "2017-12-12", regardless the time zone it executed in
However, such Date instance can be used only to format the date-only value. You cannot use it for computing date differences, for example, which would need the original and correct UTC value.
Alternative
If you need always the same date-only format and not the format specific to the current locale, you do not need date-fns. You can format the string by the concatenation of padded numbers:
const dt = new Date('2017-12-12');
const year = dt.getUTCFullYear()
const month = dt.getUTCMonth() + 1 // Date provides month index; not month number
const day = dt.getUTCDate()
// Print always "2017-12-12", regardless the time zone it executed in
console.log(year + '-' + padToTwo(month) + '-', padToTwo(day));
// Or use a template literal
console.log(`${year}-${padToTwo(month)}-${padToTwo(day)}`);
function padToTwo (number) {
return number > 9 ? number : '0' + number
}

Only adding the #ferdinand-prantl answer. If you are using the date-fns, you can parse the string date ('2017-12-12') using the parseISO(here) fn from date-fns, which will complete the missing ISO 8601 format with your local time zone. When you use the format fn, you are going to keep the date.
const strDate = '2017-12-12';
const isoDate = parseISO(strDate);
const formattedDate = format(isoDate, 'YYYY-MM-DD');
console.log({strDate, isoDate, formattedDate})
//{
// strDate: '2017-12-12',
// isoDate: 2017-12-12T02:00:00.000Z,
// formattedDate: '2017-12-12'
//}

How to get hours and minutes in desired timezone without creating new moment object?

I have to display a string on the web page in this format: 16:00 HH:mm
I'm using a moment object to represent a date/time and timezone.
var day = moment().tz('GMT');
day.hours(16).minutes(0).seconds(0).milliseconds(0);
So this is 16:00 in GMT time.
On my web page I want to change the time zone and then collect the hours and minutes.
If I make a new moment object
var day2 = moment().tz('PST); //this is 8 AM since gmt was 16
console.log(day2.get('hours'));
it is 16 not 8!
and try to get the hours and minutes they are in GMT not in PST.
How can I get it in PST? Do I have to keep wrapping it?

// initialize a new moment object to midnight UTC of the current UTC day
var m1 = moment.utc().startOf('day');
// set the time you desire, in UTC
m1.hours(16).minutes(0);
// clone the existing moment object to create a new one
var m2 = moment(m1); // OR var m2 = m1.clone(); (both do the same thing)
// set the time zone of the new object
m2.tz('America/Los_Angeles');
// format the output for display
console.log(m2.format('HH:mm'));
Working jsFiddle here.
If you can't get it to work, then you haven't correctly loaded moment, moment-timezone, and the required time zone data. For the data, you either need to call moment.tz.add with the zone data for the zones you care about, or you need to use one of the moment-timezone-with-data files available on the site.
In the fiddle, you can see the moment-files I'm loading by expanding the External Resources section.

PST can mean different things in different regions. In the moment-timezone docs, I see nothing referring to "PST" or similar abbreviations.
Perhaps try:
var day2 = moment().tz('PST');
// 16 with Error: Moment Timezone has no data for PST. See http://momentjs.com/timezone/docs/#/data-loading/.
var day2 = moment().tz('America/Los_Angeles');
// 15

I don't know about using moment.js, but it's fairly simple using POJS and the same algorithm should work. Just subtract 8 hours from the UTC time of a date object and return a formatted string based on the adjusted UTC time.
Assuming PST is "Pacific Standard Time", also known as "Pacific Time" (PT), and is UTC -8:00:
/* #param {Date} date - input date object
** #returns {string} - time as hh:mm:ss
**
** Subtract 8 hours from date UTC time and return a formatted times string
*/
function getPSTTime(date) {
var d = new Date(+date);
d.setUTCHours(d.getUTCHours() - 8);
return ('0' + d.getUTCHours()).slice(-2) + ':' +
('0' + d.getUTCMinutes()).slice(-2) + ':' +
('0' + d.getUTCSeconds()).slice(-2);
}
document.write('Current PST time: ' + getPSTTime(new Date));
There is moment-timezone which adds functionality to moment.js for IANA time zones. For PST you can use America/Los_Angeles, however it might also automatically adjust for daylight saving so you'll get PDT when that applies. If you want ignore daylight saving, use the above or find a location with the offset you need and use that.

Fetch Timestamp for last 12am in specific Timezone

The problem at hand is to find out the generic timestamp last time it was 12 am in a specific timezone.
e.g. I want timestamp when it was last 12 am in India (IST).
Tried the following:
var IST = new Date(new Date().getTime() + 330*60*1000)
IST.setHours(0);
IST.setMinutes(0);
IST.setSeconds(0);
IST.setMilliseconds(0);
Turns out it returns the last time it was 12 am in GMT.

When you use
new Date()
this gives the date in the current timezone.
When you change your code to:
var UTC = new Date();
UTC.setUTCHours(UTC.getUTCHours());
UTC.setUTCMinutes(UTC.getUTCMinutes());
UTC.setUTCSeconds(UTC.getUTCSeconds());
UTC.setUTCMilliseconds(UTC.setUTCMilliseconds());
now UTC is set to current UTC time. Add time difference for eventual changes in date and set time to 00:00:00
UTC = new Date(UTC.getTime() + 330*60*1000);
UTC.setUTCHours(0);
UTC.setUTCMinutes(0);
UTC.setUTCSeconds(0);
UTC.setUTCMilliseconds(0);
you will get the last UTC 12 am. Add to this the time difference with the required timezone, and you should get the right time.
var IST = new Date(UTC.getTime() + 330*60*1000);

Change a picture at a determined time

I'm looking for a way to change a picture on my website if the time is later than 21pm on a certain day. Basically I don't want to have to do it manually since I won't have access to a computer when I need to switch the image. I cannot use PHP as the website I am working on does not support PHP (only ASP).
I guess it could be done in Javascript.
Edit : the picture need to be changed once at 21 and never be changed again not even the day after.

The answer already posted should work. However, take care, that you have to trigger such function, you can do it on the page onload event, (if you want to check just once when the user load the page); or you can set a timer that every 10 minutes (or the minutes you want), trigger such function. It depends by the nature of your website and the time spent by the user on the page (if it's few minutes at most, it doesen't worth)

You can create a Date object and get the current hour of the day (according to the client), and change the source of the image based on that hour:
var d = new Date();
var hour = d.getHours();
if(hour > 21) {
document.getElementById("imageID").src = "newImage.png";
}
Update (based on comments)
If you want the image to change at 21:00 on a certain date, and to remain as that new image after that date (and you really want to use JavaScript for this), then you can create a Date object with your specified date/time (e.g. var d = new Date('June 18, 2011 21:00:00');) and you can then compare the current date with your specified date when the page loads:
var d = new Date('June 18, 2011 21:00:00');
var current = new Date();
if(current > d) {
document.getElementById("imageID").src = "newImage.png";
}
You can see an example of this here. (Comment out the first line, and comment in the second line to see the difference of future and past dates).

You should do this in the backend, this is extra overhead in the client for no real reason, but let's give it a try in JS though!
var myDate = new Date();
var curr_hour = myDate.getHours();
var day = myDate.getDate();
var month = myDate.getMonth()+1;
var year = myDate.getFullYear();
if( curr_hour>=21 && ( day==17 && month==5 && year==2011 ) )
document.getElementById('myPicture').src = 'source.jpg';
the picture will be changed after 21, of 05 / 17 / 2011 (and only for that day)

use the javascripit date object?
EDITING Per #Joe's suggestion
//initialize date object
function CheckAndChangeImage() {
var d = new Date();
var currentHour = d.getHours(); //note 0-23
var currentDay = d.getDate();
var currentMonth = d.getMonth();
var currentYear = d.getYear(); // 2011 == 111
if (currentHour >= 21 && currentDay >= 17 && currentMonth >= 5 && currentYear >= 111 )
{
//do something on late night (21,22,23 hundread hrs)
document.getElementById('thePicture').src = 'lateNight.png';
}
/* commented out, per OP edit
else
{
//do something else
document.getElementById('thePicture').src = 'OtherPicture.png';
} */
}
setInterval(CheckAndChangeImage,60000); //60,000 milliseconds in a minute`
this will check that it is equal too or greater than 21hrs on the users machine and the date is after today. the setInterval(function,ms) checks every minute so if the user comes to your site at 20:59 it should still change at 21:00. You mentioned the picture needs to be changed once and never again. This solution is very ugly. I would suggest setting up a cron on the local machine to run at 21:00 and update the time site wide. Perhaps PHP could do this, but PHP is not my language of choice. I would likely use python and/or bash for this task. But you could likely accomplish it in Perl. I would suggest an X/HTML parser.
more on the date object
getDate() Returns the day of the
month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1,
1970
getTimezoneOffset() Returns the time difference between GMT and local
time, in minutes
getUTCDate() Returns the day of the month, according to universal time
(from 1-31)
getUTCDay() Returns the day of the week, according to universal time
(from 0-6)
getUTCFullYear() Returns the year, according to universal time
(four digits)
getUTCHours() Returns the hour, according to universal time (from
0-23)
getUTCMilliseconds() Returns the milliseconds, according to
universal time (from 0-999)
getUTCMinutes() Returns the minutes, according to universal time
(from 0-59)
getUTCMonth() Returns the month, according to universal time (from
0-11)
getUTCSeconds() Returns the seconds, according to universal time
(from 0-59)
getYear() Deprecated. Use the getFullYear() method instead
parse() Parses a date string and returns the number of milliseconds
since midnight of January 1, 1970
setDate() Sets the day of the month (from 1-31)
setFullYear() Sets the year (four digits)
setHours() Sets the hour (from 0-23)
setMilliseconds() Sets the milliseconds (from 0-999)
setMinutes() Set the minutes (from 0-59)
setMonth() Sets the month (from 0-11)
setSeconds() Sets the seconds (from 0-59)
setTime() Sets a date and time by adding or subtracting a specified
number of milliseconds to/from
midnight January 1, 1970
setUTCDate() Sets the day of the month, according to universal time
(from 1-31)
setUTCFullYear() Sets the year, according to universal time (four
digits)
setUTCHours() Sets the hour, according to universal time (from
0-23)
setUTCMilliseconds() Sets the milliseconds, according to universal
time (from 0-999)
setUTCMinutes() Set the minutes, according to universal time (from
0-59)
setUTCMonth() Sets the month, according to universal time (from
0-11)
setUTCSeconds() Set the seconds, according to universal time (from
0-59)
setYear() Deprecated. Use the setFullYear() method instead
toDateString() Converts the date portion of a Date object into a
readable string
toGMTString() Deprecated. Use the toUTCString() method instead
toLocaleDateString() Returns the date portion of a Date object as a
string, using locale conventions
toLocaleTimeString() Returns the time portion of a Date object as a
string, using locale conventions
toLocaleString() Converts a Date object to a string, using locale
conventions
toString() Converts a Date object to a string
toTimeString() Converts the time portion of a Date object to a
string
toUTCString() Converts a Date object to a string, according to
universal time
UTC() Returns the number of milliseconds in a date string since
midnight of January 1, 1970, according
to universal time
valueOf() Returns the primitive value of a Date objecti
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date provides and overview of the date object
so too does w3schools
http://www.w3schools.com/jsref/jsref_obj_date.asp