javascript - how to represent MMddyyyy, hh:mm tt using Intl.DateTimeFormat - Stack Overflow

admin管理员组

文章数量:1394593

I need to display the date on the format MM/dd/yyyy, hh:mm tt for the 'en' and 'es' locale. This approach works fine, but it displays the date as MM/dd/yy, showing only the last two digits for the year instead of the entrie year.

const en = new Intl.DateTimeFormat('en', { dateStyle: 'short', timeStyle: 'short', hour12: true }).format(new Date());

const es = new Intl.DateTimeFormat('es', { dateStyle: 'short', timeStyle: 'short', hour12: true }).format(new Date());

console.log('En', en, 'Es', es);

I need to display the date on the format MM/dd/yyyy, hh:mm tt for the 'en' and 'es' locale. This approach works fine, but it displays the date as MM/dd/yy, showing only the last two digits for the year instead of the entrie year.

const en = new Intl.DateTimeFormat('en', { dateStyle: 'short', timeStyle: 'short', hour12: true }).format(new Date());

const es = new Intl.DateTimeFormat('es', { dateStyle: 'short', timeStyle: 'short', hour12: true }).format(new Date());

console.log('En', en, 'Es', es);

This approach

const en = (new Date()).toLocaleString('en');
const es = (new Date()).toLocaleString('es');

console.log('En', en, 'Es', es);

shows the full year, but it shows 24 hours format for the 'es' locale.

From here I have that when formatting large numbers of dates, it is better to create an Intl.DateTimeFormat object and use the function provided by its format property. And this might be the case. How can I get this working?

• javascript
• datetime
• format

Share Improve this question Follow asked Dec 15, 2020 at 19:08 assemblerassembler 3,3001313 gold badges4949 silver badges101101 bronze badges 5

• Your second example is correct. The locale code ES represents Spanish in Spain - the official time format in Spain is the 24 hour clock. So, either your Locale is not specific enough (es-mx is Mexico, es-pr Puerto Rico, etc), or you don't really want a locale specific format. – Randy Casburn Commented Dec 15, 2020 at 19:18
• @RandyCasburn not needed a specific format, just es – assembler Commented Dec 15, 2020 at 20:30
• Formatting using the Intl object is generally based on data from the Unicode Common Locale Data Repository (CLDR). The "locale" is actually a BCP-47 language tag that can have various extensions. It's not intended for bespoke formatting, and different hosts may produce different results for the same language tag. If you require a specific format, do it manually or use a library. – RobG Commented Dec 15, 2020 at 22:40
• @RandyCasburn—Wikipedia is not authoritative and while a helpful resource, it should not be used as a definitive reference. The CLDR section for Spanish dates and times is likely a better reference, Wikipedia may be a useful summary. – RobG Commented Dec 15, 2020 at 22:48
• @RobG - thanks great reference. – Randy Casburn Commented Dec 15, 2020 at 23:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I need to display the date on the format MM/dd/yyyy, hh:mm tt for the 'en' and 'es' locale.

Using a language code for say "es" then modifying the format is the antithesis of the purpose of the Intl object. It's supposed to format values based on the language tag provided and the results used unmodified.

Specific formats should be created manually or with a library (essentially the same thing). Spanish and English use the same characters for numbers, so the same timestamp can be presented for both languages if they don't have day or month names, e.g.

There are already a huge number of questions on how to format a javascript date. The following is an example using the Intl object:

// MM/dd/yyyy, hh:mm tt using Intl.DateTimeFormat

function formatDate(date) {
  let p = new Intl.DateTimeFormat('en',{
    year:'numeric',
    month:'2-digit',
    day:'2-digit',
    hour:'2-digit',
    minute:'2-digit',
    hour12: true
  }).formatToParts(date).reduce((acc, part) => {
      acc[part.type] = part.value;
      return acc;
  }, {});
  
  return `${p.month}/${p.day}/${p.year}, ${p.hour}:${p.minute} ${p.dayPeriod}`; 
}

console.log(formatDate(new Date()));

Presenting dates in month/day/year order to Spanish readers is likely to greatly confuse them (and the vast majority of English speakers too). Pages are presented in a particular language, so all dates, numbers, etc. should follow the conventions of that language.

本文标签： javascripthow to represent MMddyyyyhhmm tt using IntlDateTimeFormatStack Overflow