JavaScript toLocaleString() | Get the Complete Date as String using Locale Conventions

The JavaScript toLocaleString() method is used to get the complete date using locale conventions. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p id="xyz"></p>

   <script>
      const d = new Date();
      let dateLocale = d.toLocaleString();
      document.getElementById("xyz").innerHTML = dateLocale;
   </script>

</body>
</html>

Output

JavaScript toLocaleString() Syntax

The syntax of toLocaleString() method in JavaScript is:

x.toLocaleString(locales, options)

where x must be an object of the Date() constructor.

Please note: The locales and the options, both parameters are optional.

The locales parameter indicates a language specific format. This parameter is used to print the local date using specified language. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p>Locale Date in "ar-SA" (Arabic) Format: <span id="a"></span></p>
   <p>Locale Date in "en-CA" (Canadian English) Format: <span id="b"></span></p>
   <p>Locale Date in "en-US" (US English) Format: <span id="c"></span></p>

   <script>
      const d = new Date();
      document.getElementById("a").innerHTML = d.toLocaleString("ar-SA");
      document.getElementById("b").innerHTML = d.toLocaleString("en-CA");
      document.getElementById("c").innerHTML = d.toLocaleString("en-US");
   </script>

</body>
</html>

Output

Locale Date in "ar-SA" (Arabic) Format:

Locale Date in "en-CA" (Canadian English) Format:

Locale Date in "en-US" (US English) Format:

I have only used the three locales to make you aware about how the things works.

The options parameter is used when we need to set properties. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p>Locale Date: <span id="a"></span></p>
   <p>UTC Date: <span id="b"></span></p>

   <script>
      const d = new Date();
      document.getElementById("a").innerHTML = d.toLocaleString("en-US");
      document.getElementById("b").innerHTML = d.toLocaleString("en-US", {timeZone: 'UTC'});
   </script>

</body>
</html>

Output

Locale Date:

UTC Date:

Please note: To get only the date portion, use toLocaleDateString() and to get only the time portion, use toLocaleTimeString().

Please note: To display date in format dd-mm-yyyy, refer to its separate example.

Please note: To display time in format hh:mm:ss, refer to its separate example.

Please note: To display time in format hh:mm:ss AM/PM, refer to its separate example.

JavaScript Online Test

« Previous Tutorial Next Tutorial »