Format Date and Time with Vanilla JavaScript
Tags: javascript, webdev, beginners, frontend
Published: 2020-08-31 18:47:26

---
title: Format Date and Time with Vanilla JavaScript
published: true
description: I've used a variety of tools over the years to manage date and time functionality. Here I am documenting the Vanilla JavaScript for my own use.
tags: JavaScript, WebDev, Beginners, FrontEnd
series: JavaScript Tips
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6r2cyp3d2r3xecmlful4.jpg
---

I've used a variety of tools over the years to manage date and time functionality in JavaScript. Here I am documenting the Vanilla JavaScript patterns for my own use.

> See [`Intl.DateTimeFormat()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) for reference information beyond what is in this article.

## `Date.prototype.toLocaleString`

There is also a generic method called `toLocaleString` and it can take all of the options from the `toLocaleDateString` and `toLocaleTimeString` methods.

### Support
[CanIUse Support](https://caniuse.com/#feat=mdn-javascript_builtins_date_tolocalestring)

```javascript
const date = new Date();

const options1 = {
  month: 'short'
};

console.log(date.toLocaleString('en-US', options1));
// Aug

const options2 = {
  hour: '2-digit'
};

console.log(date.toLocaleString('en-US', options2));
// 1 PM

const dateOptions = {
  weekday: 'long',
  day: 'numeric',
  month: 'long',
  year: 'numeric'
};
const timeOptions = {
  hour12: true,
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
};

const options3 = {
  ...timeOptions, ... dateOptions
};

console.log(date.toLocaleString('en-US', options3));
// Monday, Aug 10, 2020, 1:44:27 PM
```

## `Date.prototype.toLocaleDateString`

The method accepts a **locale** and an optional **options** parameter where you can pass one or more flags to control the output behavior.

### Support
[CanIUse Support](https://caniuse.com/#feat=date-tolocaledatestring)

```javascript
const date = new Date();

console.log(date.toLocaleDateString('en-US'));
// 8/10/2020

const dateOptions1 = {
  weekday: 'long',
  day: 'numeric',
  month: 'long',
  year: 'numeric'
};

console.log(date.toLocaleDateString('en-US, dateOptions1);
// Monday, August 10, 2020

const dateOptions2 = {
  day: 'numeric',
  month: 'short'
};

console.log(date.toLocaleDateString('en-US, dateOptions2);
// Aug 10

const dateOptions3 = {
  month: 'long'
};

console.log(date.toLocaleDateString('fr-FR, dateOptions3);
// juillet
```

### Options

* `weekday`: `'narrow'`, `'short'`, `'long'`
* `day`: `'numeric'`, `'2-digit'`
* `month`: `'numeric'`, `'2-digit'`, `'narrow'`, `'short'`, `'long'`
* `year`: `'numeric'`, `'2-digit'`

## `Date.prototype.toLocaleTimeString`

Not only does this method support **locale** like the previous `toLocaleDateString` method, but it also supports a **timeZone** option.

### Support
[CanIUse Support](https://caniuse.com/#feat=mdn-javascript_builtins_date_tolocaletimestring)

```javascript
const date = new Date();

console.log(date.toLocaleTimeString('en-US'));
// 1:38:27 PM

const timeOptions1 = {
  hour12: true,
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
};

console.log(date.toLocaleTimeString('en-US', timeOptions1));
// 1:38:27 PM

const timeOptions2 = {
    timeZone: 'America/Los_Angeles',
};

console.log(date.toLocaleTimeString('en-US', timeOptions2));
// 10:38:27 AM
```

### Options

* `hour12`: `true`, `false`
* `hour`: `'numeric'`, `'2-digit'`
* `minute`: `'numeric'`, `'2-digit'`
* `second`: `'numeric'`, `'2-digit'`