I put the my html code to Australia/Sydney Date format,
but its not working correctly, it always shown currant date, like as Friday, December 9, 2022 dose any one know the solution?
Australia date now Saturday, December 10, 2022
Thank you
here is my code
const datesausDiv = document.getElementById('date-div-aus');
function myDateFunction() {
const now = new Date();
const timeZones = ['Australia/Sydney'];
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
const nowStr = now.toLocaleString('en-US', options);
datesausDiv.innerHTML = nowStr;
}
setInterval(myDateFunction, 1000);
<div id="date-div-aus"> </div>
The wording of the question is pretty confusing, but it sounds like you're trying to display the current date in Australia to users who are not necessarily in Australia.
You defined a "timezone" array but didn't do anything with it; it needs to be fed in as one of the options:
const datesausDiv = document.getElementById('date-div-aus');
function myDateFunction() {
const now = new Date();
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: "Australia/Sydney"
};
const nowStr = now.toLocaleString('en-US', options);
datesausDiv.innerHTML = nowStr;
}
setInterval(myDateFunction, 1000);
<div id="date-div-aus"> </div>
(Note: to the likely resigned chagrin of the residents of Perth, the above pretends that Australia has only one timezone.)
The following demonstrates how you can present the same (current) time in different formats and for different global locations:
const now = new Date();
console.log("Sydney:",now.toLocaleString('en-GB', {timeZone:"Australia/Sydney"}));
console.log("New York:",now.toLocaleString('en-US', {timeZone:"America/New_York"}));
console.log("here:",now.toLocaleString());
<div id="date-div-aus"> </div>
Based on this wiki, it says that "Australians typically write the date with the day leading, as in the United Kingdom and New Zealand".
This means that dates have these possible formats:
4 December 2022
2022-12-04 or 04/12/2022
Therefore, the only fix you need is to use en-GB.
Please let me know if this is what you were searching for, else provide an example of the format you wish the date to show up. Have a nice day.
const datesausDiv = document.getElementById('date-div-aus');
function myDateFunction() {
const now = new Date();
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
const nowStr = now.toLocaleString('en-GB', options);
datesausDiv.innerHTML = nowStr;
}
setInterval(myDateFunction, 1000);
<div id="date-div-aus"> </div>
Split the string on each forward slash to get the day, month and year. Pass the year, month minus 1 and the day to the Date() constructor. The Date() constructor creates and returns a new Date object.
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
I have a setting for a date format that looks like:
const shortMonth12 = {
year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: 'true' };
Which will give me the following date format:
console.log(date.toLocaleString('en-US', shortMonth12)) // "Mar 28, 2022, 01:55 PM"
Great, it works and we have the date format we want. We dont want to change it.
But we also want to also translate the month name. But problem is the format itself also changes when providing another locale. For example:
console.log(date.toLocaleString('sv-SE', shortMonth12)); // "28 mars 2022 01:55 em"
So, we want to use the locales to translate the months, but also keep the formatting the same. Is it possible the way the implementation looks like?
So, we want to use the locales to translate the months, but also keep the formatting the same.
No, since toLocaleString uses the provided locale to format the date, the outcome is depending on the locale.
If you use 2 different locale's that have different date formats, like en-US and sv-SE you'll get different formats, as intended.
en-US: Mar 28, 2022, 02:19 PM
sv-SE: 28 mars 2022 02:19 em
You can get the desired outcome by creating the string manual, this requires some more logic and goes against the idea behind toLocaleString.
Use the functions like toLocaleTimeString and getFullYear to create variables based on the locale, then create a string with the desired format, for example:
const customFormat = (date, locale) => {
let d = date.getDate(),
m = date.toLocaleString(locale, { month: 'long' }),
y = date.getFullYear(),
t = date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: 'true' });
return `${d} ${m}, ${y}, ${t}`;
}
const d = new Date();
const d1 = customFormat(d, 'en-US');
const d2 = customFormat(d, 'sv-SE');
console.log(d1); // 28 March, 2022, 02:25 PM
console.log(d2); // 28 mars, 2022, 02:25 em
I have a standard date in ISO format: 1950-01-01 (date of birth)
And I need to convert it to a javascript object, so I can convert it to US Format (01/01/1050).
However when I convert it, it changes it to: Sat Dec 31 1949 17:00:00 GMT-0700
I just need it converted, without any offsets, or changes. If they were born on x day, it is x day.
Here is what I am doing currently:
$("#dob1").val( new Date(client.dob1).toLocaleDateString('en', { day: '2-digit', month: '2-digit', year: 'numeric' }) )
client.dob1 = "1950-01-01"
Final working result, in case anyone stumbles upon this:
$("#dob1").val( new Date(client.dob1).toLocaleDateString('en', { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: "UTC" }) )
You can also replace the dashes with slashes, and make a new Date() from the resulting string.
(some code from https://stackoverflow.com/a/29185654/2033574)
// Manually
date1 = new Date("1950/01/01")
// Or programmatically:
dashDate = "1950-01-01"
date2 = new Date(dashDate.replace(/-/g, '/'))
// Same output
document.write(date1 + "<br>" + date2)
You can simple create a Date object like this.
new Date('2015-10-13')
You can read here more about Date
I want the server to always serve dates in UTC in the HTML, and have JavaScript on the client site convert it to the user's local timezone.
Bonus if I can output in the user's locale date format.
Seems the most foolproof way to start with a UTC date is to create a new Date object and use the setUTC… methods to set it to the date/time you want.
Then the various toLocale…String methods will provide localized output.
Example:
// This would come from the server.
// Also, this whole block could probably be made into an mktime function.
// All very bare here for quick grasping.
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);
console.log(d); // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
console.log(d.toLocaleString()); // -> Sat Feb 28 23:45:26 2004
console.log(d.toLocaleDateString()); // -> 02/28/2004
console.log(d.toLocaleTimeString()); // -> 23:45:26
Some references:
toLocaleString
toLocaleDateString
toLocaleTimeString
getTimezoneOffset
You can do it with moment.js (deprecated in 2021)
It's best to parse your date string from UTC as follows (create an ISO-8601 compatible string on the server to get consistent results across all browsers):
var m = moment("2013-02-08T09:30:26Z");
Now just use m in your application, moment.js defaults to the local timezone for display operations. There are many ways to format the date and time values or extract portions of it.
You can even format a moment object in the users locale like this:
m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us
To transform a moment.js object into a different timezone (i.e. neither the local one nor UTC), you'll need the moment.js timezone extension. That page has also some examples, it's pretty simple to use.
Note: Moment JS recommends more modern alternatives, so it is probably not a good choice for new projects.
You can use new Date().getTimezoneOffset()/60 for the timezone. There is also a toLocaleString() method for displaying a date using the user's locale.
Here's the whole list: Working with Dates
In JS there are no simple and cross platform ways to format local date time, outside of converting each property as mentioned above.
Here is a quick hack I use to get the local YYYY-MM-DD. Note that this is a hack, as the final date will not have the correct timezone anymore (so you have to ignore timezone). If I need anything else more, I use moment.js.
var d = new Date();
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0, 10);
// 2017-05-09T08:24:26.581Z (but this is not UTC)
The d.getTimezoneOffset() returns the time zone offset in minutes, and the d.getTime() is in ms, hence the x 60,000.
2021 - you can use the browser native Intl.DateTimeFormat
const utcDate = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat().format(utcDate));
// expected output: "21/04/2021", my locale is Switzerland
Below is straight from the documentation:
const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
// Results below assume UTC timezone - your results may vary
// Specify default date formatting for language (locale)
console.log(new Intl.DateTimeFormat('en-US').format(date));
// expected output: "12/20/2020"
// Specify default date formatting for language with a fallback language (in this case Indonesian)
console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
// expected output: "20/12/2020"
// Specify date and time format using "style" options (i.e. full, long, medium, short)
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));
// Expected output "Sunday, 20 December 2020 at 14:23:16 GMT+11"
Once you have your date object constructed, here's a snippet for the conversion:
The function takes a UTC formatted Date object and format string.
You will need a Date.strftime prototype.
function UTCToLocalTimeString(d, format) {
if (timeOffsetInHours == null) {
timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
}
d.setHours(d.getHours() + timeOffsetInHours);
return d.strftime(format);
}
// new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
var serverDate = new Date(2018, 5, 30, 19, 13, 15); // just any date that comes from server
var serverDateStr = serverDate.toLocaleString("en-US", {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
})
var userDate = new Date(serverDateStr + " UTC");
var locale = window.navigator.userLanguage || window.navigator.language;
var clientDateStr = userDate.toLocaleString(locale, {
year: 'numeric',
month: 'numeric',
day: 'numeric'
});
var clientDateTimeStr = userDate.toLocaleString(locale, {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
console.log("Server UTC date: " + serverDateStr);
console.log("User's local date: " + clientDateStr);
console.log("User's local date&time: " + clientDateTimeStr);
Here's what I've used in past projects:
var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set. again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');
The .getTimezoneOffset() method reports the time-zone offset in minutes, counting "westwards" from the GMT/UTC timezone, resulting in an offset value that is negative to what one is commonly accustomed to. (Example, New York time would be reported to be +240 minutes or +4 hours)
To the get a normal time-zone offset in hours, you need to use:
var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60
Important detail:
Note that daylight savings time is factored into the result - so what this method gives you is really the time offset - not the actual geographic time-zone offset.
With date from PHP code I used something like this..
function getLocalDate(php_date) {
var dt = new Date(php_date);
var minutes = dt.getTimezoneOffset();
dt = new Date(dt.getTime() + minutes*60000);
return dt;
}
We can call it like this
var localdateObj = getLocalDate('2015-09-25T02:57:46');
I mix the answers so far and add to it, because I had to read all of them and investigate additionally for a while to display a date time string from db in a user's local timezone format.
The datetime string comes from a python/django db in the format: 2016-12-05T15:12:24.215Z
Reliable detection of the browser language in JavaScript doesn't seem to work in all browsers (see JavaScript for detecting browser language preference), so I get the browser language from the server.
Python/Django: send request browser language as context parameter:
language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })
HTML: write it in a hidden input:
<input type="hidden" id="browserlanguage" value={{ language }}/>
JavaScript: get value of hidden input e.g. en-GB,en-US;q=0.8,en;q=0.6/ and then take the first language in the list only via replace and regular expression
const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "$1");
JavaScript: convert to datetime and format it:
var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);
See: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
The result is (browser language is en-gb): 05/12/2016, 14:58
The best solution I've come across is to create [time display="llll" datetime="UTC TIME" /] Tags, and use javascript (jquery) to parse and display it relative to the user's time.
http://momentjs.com/ Moment.js
will display the time nicely.
You could use the following, which reports the timezone offset from GMT in minutes:
new Date().getTimezoneOffset();
Note :
- this function return a negative number.
getTimeZoneOffset() and toLocaleString are good for basic date work, but if you need real timezone support, look at mde's TimeZone.js.
There's a few more options discussed in the answer to this question
To convert date to local date use toLocaleDateString() method.
var date = (new Date(str)).toLocaleDateString(defaultlang, options);
To convert time to local time use toLocaleTimeString() method.
var time = (new Date(str)).toLocaleTimeString(defaultlang, options);
A very old question but perhaps this helps someone stumbling into this.
Below code formats an ISO8601 date string in a human-friendly format corresponding the user's time-zone and locale. Adapt as needed. For example: for your app, are the hours, minutes, seconds even significant to display to the user for dates more than 1 days, 1 week, 1 month, 1 year or whatever old?
Also depending on your application's implementation, don't forget to re-render periodically.
(In my code below at least every 24hours).
export const humanFriendlyDateStr = (iso8601) => {
// Examples (using Node.js):
// Get an ISO8601 date string using Date()
// > new Date()
// 2022-04-08T22:05:18.595Z
// If it was earlier today, just show the time:
// > humanFriendlyDateStr('2022-04-08T22:05:18.595Z')
// '3:05 PM'
// If it was during the past week, add the day:
// > humanFriendlyDateStr('2022-04-07T22:05:18.595Z')
// 'Thu 3:05 PM'
// If it was more than a week ago, add the date
// > humanFriendlyDateStr('2022-03-07T22:05:18.595Z')
// '3/7, 2:05 PM'
// If it was more than a year ago add the year
// > humanFriendlyDateStr('2021-03-07T22:05:18.595Z')
// '3/7/2021, 2:05 PM'
// If it's sometime in the future return the full date+time:
// > humanFriendlyDateStr('2023-03-07T22:05:18.595Z')
// '3/7/2023, 2:05 PM'
const datetime = new Date(Date.parse(iso8601))
const now = new Date()
const ageInDays = (now - datetime) / 86400000
let str
// more than 1 year old?
if (ageInDays > 365) {
str = datetime.toLocaleDateString([], {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
// more than 1 week old?
} else if (ageInDays > 7) {
str = datetime.toLocaleDateString([], {
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
// more than 1 day old?
} else if (ageInDays > 1) {
str = datetime.toLocaleDateString([], {
weekday: 'short',
hour: 'numeric',
minute: 'numeric',
})
// some time today?
} else if (ageInDays > 0) {
str = datetime.toLocaleTimeString([], {
timeStyle: 'short',
})
// in the future?
} else {
str = datetime.toLocaleDateString([], {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
})
}
return str
}
Inspired from: https://alexwlchan.net/2020/05/human-friendly-dates-in-javascript/
Tested using Node.js
Don't know how to do locale, but javascript is a client side technology.
usersLocalTime = new Date();
will have the client's time and date in it (as reported by their browser, and by extension the computer they are sitting at). It should be trivial to include the server's time in the response and do some simple math to guess-timate offset.