# Intl.DateTimeFormat

The `Intl.DateTimeFormat` object enables language-sensitive date and time formatting. It is part of the ECMAScript Internationalization API.

## 1. Basic Usage

The constructor takes two optional arguments: `locales` and `options`.

```javascript
const date = new Date(Date.UTC(2023, 11, 25, 3, 0, 0));

// US English
console.log(new Intl.DateTimeFormat('en-US').format(date));
// "12/25/2023"

// British English
console.log(new Intl.DateTimeFormat('en-GB').format(date));
// "25/12/2023"

// Korean
console.log(new Intl.DateTimeFormat('ko-KR').format(date));
// "2023. 12. 25."
```

## 2. Using Options

You can customize the output using the `options` object.

### Date and Time Styles
Shortcuts for standard formats.

```javascript
const options = { dateStyle: 'full', timeStyle: 'long' };
const formatter = new Intl.DateTimeFormat('en-US', options);

console.log(formatter.format(date));
// "Monday, December 25, 2023 at 3:00:00 AM GMT"
```

Values for `dateStyle` and `timeStyle`: `'full'`, `'long'`, `'medium'`, `'short'`.

### Component Formatting
You can specify exactly which components to display and how.

```javascript
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
};

console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
// "Montag, 25. Dezember 2023"
```

## 3. Formatting Ranges

`formatRange()` formats a date range.

```javascript
const date1 = new Date(Date.UTC(2023, 0, 10));
const date2 = new Date(Date.UTC(2023, 0, 20));

const fmt = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
});

console.log(fmt.formatRange(date1, date2));
// "Jan 10 – 20, 2023"
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/date-and-time]]