How To Get A Short Locale Date String In JavaScript

Get a short Locale Date string in JavaScript

This article will show you how to get a short locale Date string in JavaScript instead of a long Date string when printing it on the console. Let’s read this article now.

Get a short locale Date string in JavaScript

Below are three ways we want to share with you. Each method has a sample code attached to read and practice.

Using toLocaleDateString() function

You can read more about the syntax of toLocalDateString() here.

First, we will initialize a date. Then we will create an options object that includes the year, month, and day according to the standard of the toLocaleDateString() function. You can refer to some other properties of options here.

const date = new Date();

const options = {
  year: 'numeric',
  month: '2-digit',
  day: 'numeric',
};

// Using toLocaleDateString()
console.log(date.toLocaleDateString('en', options));

Output:

10/24/2022

Using format() in Intl.DateTimeFormat object

Intl.DateTimeFormat object allows us to format dates easily.

Syntax:

format(date)

Description: 

Format the date based on the locale and options of the Intl.DateTimeFormat object.

First, we create a formatter object using the Intl.DateTimeFormat constructor. Just pass into the constructor a locale string. Then we call the format() function on the formatter object and pass the date object we need to format into it.

// Get current date
const date = new Date();

// Create a formatter for JAPAN
const jpFormatter = new Intl.DateTimeFormat('jp');

// Use format() on formatter to format date
console.log('Japan: ' + jpFormatter.format(date)); // mm/dd/yyyy

// Create a formatter for US
const usFormatter = new Intl.DateTimeFormat('en-US');

// Use format() on formatter to format date
console.log('US: ' + usFormatter.format(date)); // mm/dd/yyyy

Output:

Japan: 10/24/2022
US: 10/24/2022

Using format() in moment.js

Moment.js is a powerful library for datetime manipulation in JavaScript. Built to work in both browsers and Node.js.

You can download moment.js via CDN here. If you use a CDN, note that you must import a file that ends with ‘moment-with-locales.min.js’.

Syntax:

moment().format(type);

Parameter:

  • type: A string representing the format type.

In this case, we use the locale() function to set the locale for the moment object. Then we use the format() function to format the date string in the format we want. Check out some parameters for the format() function below:

  •  LT: “11:22 PM”,
  •  LTS: “11:22:23 PM”,
  •  L: “11/20/2022”,
  •  l: “11/20/2022”,
  •  LL: “November 20, 2022”,
  •  ll: “Nov 20, 2022”,
  •  LLL: “November 20, 2022 11:22 PM”,
  •  lll: “Nov 20, 2022 11:22 PM”,
  •  LLLL: “Sunday, November 20, 2022 11:22 PM”,
  •  llll: “Sun, Nov 20, 2022 11:22 PM”
// Set the locale. Default = en
moment.locale();

// Use format() to get short locale date string
console.log("US: " + moment().format('L'));

// Set locale for French
moment.locale('fr');

// Use format() to get short locale date string
console.log("French: " + moment().format('L'));

Output:

US: 10/24/2022
French: 24/10/2022

Summary

As we have shown in the examples in the tutorial above, there are different ways to get a short locale Date string in JavaScript. We recommend the first way “use the toLocaleDateString() function” because it is the simplest and increases the code’s readability. We hope this article was helpful to you.

Have a nice day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *