All apps use of dates in some sort of way. And one common operation with a date is to display it in a readable format.
To make it readable and understandable, we need to localize the date-strings. And along with localization, also the formats which are familiar to the user.
There are so many libraries to easily work with localization or internationalization (i18n) of the Date Objects. Some of these libraries are:
But, you might not need any of these libraries to have some basic Formatting and Localization on the Date Objects.
You can use Date.prototype.toLocaleString
and its customizable API to get the localized output easily. Like in the following example, we will use the Locale String to easily get the Readable Date desired by the user:
const date = new Date() // Date from current timestamp
console.log(+date, date);
/* π
1581422692394
Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/
// For above date, let's see different locales
console.log(
'For USA Users: ', date.toLocaleString('en-US'))
// π For USA based Users: 2/11/2020, 1:04:52 PM
console.log(
'For UK Users: ', date.toLocaleString('en-GB'))
// π For UK based Users: 11/02/2020, 13:04:52
console.log(
'For DE Users: ', date.toLocaleString('de-DE'))
// π For DE based Users: 11.2.2020, 13:04:52
But it is not that; you have only seen the basic operations.
This function also accepts the second parameter as a JavaScript Object. You can customize the result of toLocaleString
by adding some specific keys & related values to this JS Object. For example, you can remove Weekday; change Month Display etc.
Lets looks at some examples of more customization to the output with the second parameter
const date = new Date() // Date from current timestamp
console.log(+date, date);
/* π
1581422692394
Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/
const readableDate = date.toLocaleString('de-DE', {
day: "2-digit",
month: "long",
year: "2-digit"
});
// π "11. Februar 20"
/*
year: "numeric" β "11. Februar 2020"
month: "numeric" β "11.2.20"
month: "2-digit" β "11.02.20"
month: "short" β "11. Feb. 20"
month: "narrow" β "11. F 20"
*/
The signature of the object to customize the output of the toLocaleString function can have the following keys. Though there are many more keys, I am listing here only the common ones.
-
dateStyle:
[ 'full', 'long', 'medium', 'short' ]
-
timeStyle:
[ 'full', 'long', 'medium', 'short' ]
- timeZone: Time Some from IANA TimeZone Database
-
month:
[ 'numeric', '2-digit', 'long', 'short', 'narrow' ]
-
year:
[ 'numeric', '2-digit' ]
-
weekday:
[ 'long', 'short', 'narrow' ]
-
day, hour, minute and second:
[ 'numeric', '2-digit' ]
-
timeZooneName:
[ 'long', 'short' ]
Things to Notice
Few things to pay attention here:
- Any numeric value has these two values:
numeric
and2-digit
- And string values are from
full
,long
,medium
,short
andnarrow
- Anything with possible one character Abbreviation can have
narrow
as its value
Another big thing to notice here is:
you donβt need to stick to a specific timeZone if you need the desired output.
For.
as the separator, usede-DE
; for/
as the separator, useen-GB
and etc.
You can read more about this function atMDN documentation of toLocaleString.
Specific Functions
Like the above function toLocaleStrung
; there are exactly the same functions for only Date or Time. Hence you don't need to do some string operation to separate Date and Time.
Date
For only Date outputs, you can use date.toLocaleDateString
const readableDate = date.toLocaleDateString('de-DE', {
day: "2-digit",
month: "long",
year: "2-digit"
});
console.log(readableDate);
// π 11. Februar 20
You can read more about this function at MDN documentation of toLocaleDateString.
Time
If you want only the Time strings, you can use date.toLocaleTimeString
const readableTime = date.toLocaleTimeString('de-DE', {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
console.log(readableTime);
// π 13:04:52
You can read more about this function at MDN documentation of toLocaleString.
Conclusion
Dates are very important information to display in any application. Applications which are as simple as a ToDo or this Blog. Dates are also complex objects.
But you donβt need heavy lifting libraries all the time. This post gives a brief idea to have some desired outputs without jumping into heavy (but very useful) packages.
What do you use for Date object manipulation?
Let me know through comments π¬ or on Twitter at @patel_pankaj_ and @time2hack
If you find this article helpful, please share it with others π£
Subscribe to the blog to receive new posts right to your inbox.
Originally published at https://time2hack.com on February 18, 2020.
Top comments (0)