ToLocalDateString turns out to have so much functionality

For dates, we often add large libraries (such as moment.js or day.js) to format simple dates. But this is actually much simpler than using the toLocalDateString() method, which does what it does not only on dates but also on numbers

Plug-ins for time processing

I have included plugins about time handling that are popular now

Time processing plug-in

toLocaleDateString

The toLocaleDateString method returns a string of the date part of the date object in a format that varies from language to language. The new locales and options parameters enable the program to specify which language formatting rules to use, allowing you to customize the behavior of the method.

In older browsers, the locales and options arguments are ignored, and the locale used and the string format returned are implemented independently

❝

About compatibility plugin MDN

❞

Date.prototype.toLocaleDateString()

Date

There are three common ways to convert a Date instance to a string representing the local time

1. The Date. The prototype. ToLocaleString () : complete local time.
2. Date. Prototype. ToLocaleDateString () : local Date (not including hours, minutes, and seconds).
3. Date. Prototype. ToLocaleTimeString () : local time (excluding (Date) (month) (year))

new Date().toLocaleTimeString() // "12:26:15 PM"
new Date().toLocaleDateString() / / "2020/10/18"
new Date().toLocaleString() // "2020/10/18 12:26:24 PM"
Copy the code

All three methods take two optional arguments

new Date().toLocaleString([locales[, options]])
new Date().toLocaleDateString([locales[, options]])
new Date().toLocaleTimeString([locales[, options]])
Copy the code

Of the two arguments, locales is a string specifying the language used and options is a configuration object

How to use

I use it in a Vue environment

Display the date

<p>{{formatDate('2020/10/18')}}</p>
Copy the code

Results: October 18, 2020

formatDate(date) {
     const options = { year: 'numeric'.month: 'long'.day: 'numeric' }
     return new Date(date).toLocaleDateString('zh-CN', options)
}
Copy the code

Display week

<p>{{formatDate('2020/10/18')}}</p>
Copy the code

Results: Sunday 18 October 2020

formatDate(date) {
     const options = {  weekday: 'long'.year: 'numeric'.month: 'long'.day: 'numeric' }
     return new Date(date).toLocaleDateString('zh-CN', options)
}
Copy the code

Different regional languages

<p>{{formatDate('2020/10/18')}}</p>
Copy the code

Results: Sunday, October 18, 2020

formatDate(date) {
     const options = {  weekday: 'long'.year: 'numeric'.month: 'long'.day: 'numeric' }
     return new Date(date).toLocaleDateString('en-US', options)
}
Copy the code

parameteroptions

1. DateStyle: The possible values are full, long, medium, and short.
2. TimeStyle: Possible values are full, long, medium, and short.
3. Month: The possible values are numeric, 2-digit, long, short, and narrow.
4. Year: The possible values are numeric and 2-digit.
5. Weekday: The value can be long, short, or narrow.
6. Day, hour, minute, and second: the possible values are numeric and 2-digit.
7. TimeZone: timeZone database with possible values of IANA.
8. TimeZooneName: Possible values are long and short.
9. Hour12:24-hour cycle or 12-hour cycle, possible values are true and false

example

new Date().toLocaleDateString('zh-CN', {
  weekday: 'long'.  year: 'numeric'.  month: 'long'.  day: 'numeric'
}) // "Sunday 18 October 2020"  new Date().toLocaleTimeString('zh-CN', {  timeZone: 'Asia/Shanghai'. hour12: false. timeZoneName: 'long' }) // "12:20:18 CST"  new Date().toLocaleTimeString('zh-CN', {  timeZone: 'Asia/Shanghai'. hour12: true. day: 'numeric' }) // "18th 12:21:29 PM" Copy the code

Extend the

segmentation

Has this method in a Number of prototype toLocaleString, namely Number. The prototype. ToLocaleString ()

const price = 12345678;
price.toLocaleString(); // => "12,345,678"
Copy the code

Display different units

Currency unit list, view

var price = 2499;
price.toLocaleString('zh-CN', {
  style: 'currency'.  currency: 'RMB'
});
RMB 2499.00 "/ /"  var price = 2499; price.toLocaleString('zh-CN', {  style: 'currency'. currency: 'USD' }); US $2499.00 "/ /" Copy the code

Control decimal place

var price = 2499;
price.toLocaleString('zh-CN', {
  style: 'currency'.  currency: 'KNS'.  minimumFractionDigits:3
}); / / "KNS 2499000" Copy the code