JavaScript Date toLocaleDateString() Method

The toLocaleDateString() method in JavaScript is used to convert the date and time of a Date object to a string representing the date portion using the locale-specific conventions.

Syntax:

dateObj.toLocaleDateString( [locales][, options])

Parameters:

This method accepts two parameters as mentioned above and described below:

• locales: This parameter is an array of locale strings that contain one or more language or locale tags. Note that it is an optional parameter. If you want to use the specific format of the language in your application then specify that language in the locales argument.
• Options: It is also an optional parameter and contains properties that specify comparison options. Some properties are localeMatcher, timeZone, weekday, year, month, day, hour, minute, second, etc.

Return values:

• Returns a date as a string value in a specific format that is specified by the locale. 

Note: The dateObj should be a valid Date object.

Example 1: Formatting Date with JavaScript's toLocaleDateString()

The code initializes a Date object and options for formatting. It then demonstrates the use of toLocaleDateString() to output the current date in different formats based on locale settings, with and without custom options.

let dateObj = new Date();
let options = {
    weekday: "long",
    year: "numeric",
    month: "short",
    day: "numeric"
};
console.log(dateObj.toLocaleDateString("en-US"));
console.log(dateObj.toLocaleDateString("en-US", options));

3/14/2024
Thursday, Mar 14, 2024

Example 2: Without parameters return value of this method cannot be relied upon in scripting. It uses the operating system's locale conventions. 

let dateObj = new Date(1993, 6, 28, 14, 39, 7);
console.log(dateObj.toLocaleDateString());

7/28/1993

Note: The locales and options arguments are not supported in all browsers. To check whether it is supported or not we can use the following function:

function toLocaleDateStringSupportsLocales() {
    try {
        new Date().toLocaleDateString('i');
    }
    catch (e) {
        return e.name === 'RangeError';
    }
    return false;
}

We have a complete list of Javascript Date Objects, to check those please go through this Javascript Date Object Complete reference article.

Supported Browsers:

• Google Chrome
• Edge 
• Firefox
• Opera
• Safari

What are some common pitfalls when using toLocaleDateString()?

• Not specifying locales and options, leading to inconsistent formatting across different environments.
• Assuming a specific date format without verifying the locale settings.
• Overlooking the impact of user or system locale settings on the output.