The `dateStyle` and `timeStyle` options of `Intl.DateTimeFormat`

ECMAScript 13 introduces a more concise way to format dates and times in Intl.DateTimeFormat through the dateStyle and timeStyle options. These properties significantly simplify the code logic for localized date and time display while maintaining compatibility with internationalization standards.

Basic Usage of dateStyle and timeStyle

These new options accept four preset values:

• "full"
• "long"
• "medium"
• "short"

const date = new Date(2023, 11, 31, 13, 45);

// Format only the date
new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(date);
// Output: "Sunday, December 31, 2023"

// Format only the time
new Intl.DateTimeFormat('en-US', { timeStyle: 'long' }).format(date);
// Output: "1:45:00 PM GMT+8"

Combining Date and Time Styles

Both style properties can be specified together for complete formatting:

const formatter = new Intl.DateTimeFormat('zh-CN', {
  dateStyle: 'long',
  timeStyle: 'short'
});

formatter.format(new Date());
// Example output in Chinese: "2023年12月31日 下午1:45"

Comparison with Traditional Options

Compared to the previous approach of configuring granular properties like year/month/day:

// Legacy approach
new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

// Modern equivalent
new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });

Style-Level Examples

Examples of output formats for different style levels (using en-US locale):

Regional Differences in Output

Format variations across locales:

// Japanese locale
new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(new Date());
// Output: "2023年12月31日 13:45"

// German locale
new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'short',
  timeStyle: 'medium'
}).format(new Date());
// Output: "31.12.23 13:45:00"

Integration with Time Zones

Can be combined with the timeZone option:

const nyFormatter = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'full',
  timeStyle: 'long',
  timeZone: 'America/New_York'
});

nyFormatter.format(new Date());
// Output: "Sunday, December 31, 2023 at 12:45:00 AM EST"

Browser Compatibility Notes

While modern browsers generally support it, API availability should be checked:

const supportsDateTimeStyle = () => {
  try {
    new Intl.DateTimeFormat(undefined, { dateStyle: 'short' });
    return true;
  } catch (e) {
    return false;
  }
};

Performance Optimization Tips

Reuse formatting instances:

// Avoid creating new instances repeatedly
const cachedFormatter = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'medium',
  timeStyle: 'short'
});

function formatDate(date) {
  return cachedFormatter.format(date);
}

Synergy with the Temporal API

Future usage with Temporal objects (assuming formal implementation):

// Assuming Temporal is officially implemented
const zonedDateTime = Temporal.ZonedDateTime.from('2023-12-31T13:45+08:00[Asia/Shanghai]');

new Intl.DateTimeFormat('fr-FR', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(zonedDateTime);
// Output: "31 décembre 2023 à 13:45"

Dynamic Style Switching

Adjust formats dynamically based on user preferences:

const formatByPreference = (date, preferDetailed) => {
  return new Intl.DateTimeFormat(navigator.language, {
    dateStyle: preferDetailed ? 'long' : 'short',
    timeStyle: preferDetailed ? 'medium' : 'short'
  }).format(date);
};

Input Validation Best Practices

Handling invalid style values:

function safeFormat(date, locale, dateStyle, timeStyle) {
  const options = {};
  if (['full', 'long', 'medium', 'short'].includes(dateStyle)) {
    options.dateStyle = dateStyle;
  }
  if (['full', 'long', 'medium', 'short'].includes(timeStyle)) {
    options.timeStyle = timeStyle;
  }
  
  return new Intl.DateTimeFormat(locale, options).format(date);
}

Server-Side Rendering Scenario

Usage in Node.js (requires full ICU data):

// In Node.js environment
const { DateTimeFormat } = require('intl');
const nodeFormatter = new DateTimeFormat('es-ES', {
  dateStyle: 'long',
  timeStyle: 'short'
});

console.log(nodeFormatter.format(new Date()));
// Output: "31 de diciembre de 2023 13:45"

Mobile-Specific Handling

Optimizing formats for small screens:

const isMobile = window.matchMedia('(max-width: 480px)').matches;
const mobileFormatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: isMobile ? 'short' : 'long',
  timeStyle: isMobile ? 'short' : 'medium'
});