If you need slightly less control over formatting than the currently accepted answer, Date#toLocaleDateString can be used to create standard locale-specific renderings. The locale and options arguments let applications specify the language whose formatting conventions should be used, and allow some customization of the rendering.

Options key examples:

  1. day:
    The representation of the day.
    Possible values are "numeric", "2-digit".
  2. weekday:
    The representation of the weekday.
    Possible values are "narrow", "short", "long".
  3. year:
    The representation of the year.
    Possible values are "numeric", "2-digit".
  4. month:
    The representation of the month.
    Possible values are "numeric", "2-digit", "narrow", "short", "long".
  5. hour:
    The representation of the hour.
    Possible values are "numeric", "2-digit".
  6. minute: The representation of the minute.
    Possible values are "numeric", "2-digit".
  7. second:
    The representation of the second.
    Possible values are "numeric", 2-digit".
  8. hour12:
    The representation of time format.
    Accepts boolean true or false

All these keys are optional. You can change the number of options values based on your requirements, and this will also reflect the presence of each date time term.

Note: If you would only like to configure the content options, but still use the current locale, passing null for the first parameter will cause an error. Use undefined instead.

For different languages:

  1. "en-US": For American English
  2. "en-GB": For British English
  3. "hi-IN": For Hindi
  4. "ja-JP": For Japanese

You can use more language options.

For example

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

You can also use the toLocaleString() method for the same purpose. The only difference is this function provides the time when you don't pass any options.

// Example
9/17/2016, 1:21:34 PM

References:

  • toLocaleString()

  • toLocaleDateString()

Answer from ajeet kanojia on Stack Overflow
Top answer
1 of 16
3084

If you need slightly less control over formatting than the currently accepted answer, Date#toLocaleDateString can be used to create standard locale-specific renderings. The locale and options arguments let applications specify the language whose formatting conventions should be used, and allow some customization of the rendering.

Options key examples:

  1. day:
    The representation of the day.
    Possible values are "numeric", "2-digit".
  2. weekday:
    The representation of the weekday.
    Possible values are "narrow", "short", "long".
  3. year:
    The representation of the year.
    Possible values are "numeric", "2-digit".
  4. month:
    The representation of the month.
    Possible values are "numeric", "2-digit", "narrow", "short", "long".
  5. hour:
    The representation of the hour.
    Possible values are "numeric", "2-digit".
  6. minute: The representation of the minute.
    Possible values are "numeric", "2-digit".
  7. second:
    The representation of the second.
    Possible values are "numeric", 2-digit".
  8. hour12:
    The representation of time format.
    Accepts boolean true or false

All these keys are optional. You can change the number of options values based on your requirements, and this will also reflect the presence of each date time term.

Note: If you would only like to configure the content options, but still use the current locale, passing null for the first parameter will cause an error. Use undefined instead.

For different languages:

  1. "en-US": For American English
  2. "en-GB": For British English
  3. "hi-IN": For Hindi
  4. "ja-JP": For Japanese

You can use more language options.

For example

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

You can also use the toLocaleString() method for the same purpose. The only difference is this function provides the time when you don't pass any options.

// Example
9/17/2016, 1:21:34 PM

References:

  • toLocaleString()

  • toLocaleDateString()

2 of 16
1756

For custom-delimited date formats, you have to pull out the date (or time) components from a DateTimeFormat object (which is part of the ECMAScript Internationalization API), and then manually create a string with the delimiters you want.

To do this, you can use DateTimeFormat#formatToParts. You could destructure the array, but that is not ideal, as the array output depends on the locale:

{ // example 1
   let formatter = new Intl.DateTimeFormat('en');
   let example = formatter.formatToParts();
   console.log(example);
}
{ // example 2
   let formatter = new Intl.DateTimeFormat('hi');
   let example = formatter.formatToParts();
   console.log(example);
}

Better would be to map a format array to resultant strings:

function join(date, options, separator) {
   function format(option) {
      let formatter = new Intl.DateTimeFormat('en', option);
      return formatter.format(date);
   }
   return options.map(format).join(separator);
}

let options = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let joined = join(new Date, options, '-');
console.log(joined);

You can also pull out the parts of a DateTimeFormat one-by-one using DateTimeFormat#format, but note that when using this method, as of March 2020, there is a bug in the ECMAScript implementation when it comes to leading zeros on minutes and seconds (this bug is circumvented by the approach above).

let date = new Date(2010, 7, 5);
let year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
let month = new Intl.DateTimeFormat('en', { month: 'short' }).format(date);
let day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
console.log(`{month}-${year}`);

When working with dates and times, it is usually worth using a library (eg. luxon, date-fns, moment.js is not recommended for new projects) because of the many hidden complexities of the field.

Note that the ECMAScript Internationalization API, used in the solutions above is not supported in IE10 (0.03% global browser market share in Feb 2020).

🌐
W3Schools
w3schools.com › js › js_date_formats.asp
JavaScript Date Formats
JS Examples JS HTML DOM JS HTML ... Certificate JS Reference ... The ISO format follows a strict standard in JavaScript. The other formats are not so well defined and might be browser specific. Independent of input format, JavaScript will (by default) output dates in full text ...
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Date
Date - JavaScript | MDN
This also applies to dates specified with the date time string format. When attempting to set the local time to a time falling within an offset transition (usually daylight saving time), the exact time is derived using the same behavior as Temporal's disambiguation: "compatible" option. That is, if the local time corresponds to two instants, the earlier one is chosen; if the local time does not exist (there is a gap), we go forward by the gap duration. js ·
🌐
Day.js
day.js.org › docs › en › display › format
Format · Day.js
dayjs().format() // current date in ISO8601, without fraction seconds e.g.
🌐
freeCodeCamp
freecodecamp.org › news › how-to-format-a-date-with-javascript-date-formatting-in-js
How to Format a Date with JavaScript – Date Formatting in JS
November 7, 2024 - Time Format: To format the time portion of a date, you can use the hour, minute, and second options. ... const date = new Date(); const formatter = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); const formattedTime = formatter.format(date); console.log(formattedTime); ... Apart from formatting dates for display, it's essential to handle user input for dates effectively. Here are a few considerations: Parsing User Input: Use the Date.parse() method or external libraries like Moment.js or Luxon to parse user-provided dates into valid Date objects.
🌐
Built In
builtin.com › articles › js-formatting-date
How to Format Dates in JavaScript | Built In
The most common way to format dates in JavaScript is to use the date object: ... There are a few common JavaScript date libraries you can use for more flexible date options. These include: moment.js, Deprecated, date-fns, Luxon and Day.js.
🌐
LogRocket
blog.logrocket.com › home › how to format dates in javascript: methods, libraries, and best practices
How to format dates in JavaScript: Methods, libraries, and best practices - LogRocket Blog
May 8, 2025 - The key is choosing the right tool for your specific needs: Native Date methods — Work well for simple use cases and offer good performance · date-fns — Gives you a modern, functional approach with excellent tree-shaking · Moment.js — ...
Find elsewhere
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Intl › DateTimeFormat › format
Intl.DateTimeFormat.prototype.format() - JavaScript | MDN
Use the format getter function for formatting a single date, here for Serbia: js · const options = { weekday: "long", year: "numeric", month: "long", day: "numeric", }; const dateTimeFormat = new Intl.DateTimeFormat("sr-RS", options); console.log(dateTimeFormat.format(new Date())); // "недеља, 7.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Intl › DateTimeFormat › DateTimeFormat
Intl.DateTimeFormat() constructor - JavaScript | MDN
Use the dayPeriod option to output a string for the times of day ("in the morning", "at night", "noon", etc.). Note, that this only works when formatting for a 12 hour clock (hourCycle: 'h12' or hourCycle: 'h11') and that for many locales the strings are the same irrespective of the value passed for the dayPeriod. js · const date = Date.UTC(2012, 11, 17, 4, 0, 42); console.log( new Intl.DateTimeFormat("en-GB", { hour: "numeric", hourCycle: "h12", dayPeriod: "short", timeZone: "UTC", }).format(date), ); // 4 at night" (same formatting in en-GB for all dayPeriod values) console.log( new Intl.DateTimeFormat("fr", { hour: "numeric", hourCycle: "h12", dayPeriod: "narrow", timeZone: "UTC", }).format(date), ); // "4 mat."
🌐
freeCodeCamp
freecodecamp.org › news › how-to-format-dates-in-javascript
How to Format Dates in JavaScript with One Line of Code
November 7, 2024 - The JavaScript toDateString() method returns the date portion of a date object in the form of a string using the following format: ... One major downside to this method is our inability to manipulate the date output the way we want it. For example, it doesn’t give us the ability to show dates according to our language. Let’s take a look at another method which to me is still one of the best. This method returns the date object as a string using local conventions. It also takes in options as arguments which lets you/your applications customize the behavior of the function.
🌐
JavaScript.info
javascript.info › tutorial › the javascript language › data types
Date and time
To get the time from date till now – let’s substract the dates. function formatDate(date) { let diff = new Date() - date; // the difference in milliseconds if (diff < 1000) { // less than 1 second return 'right now'; } let sec = Math.floor(diff / 1000); // convert diff to seconds if (sec < 60) { return sec + ' sec.
🌐
Codecademy
codecademy.com › article › javascript-date-format
How to Format a Date in JavaScript | Codecademy
In this tutorial, we’ll learn how to get dates, format them using different inbuilt methods, and customize their formatting in JavaScript.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Date › toLocaleDateString
Date.prototype.toLocaleDateString() - JavaScript | MDN
When the method is called many times with the same arguments, it is better to create an Intl.DateTimeFormat object and use its format() method, because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database, so future format calls can search for localization strings within a more constrained context. const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); const options = { weekday: "long", year: "numeric", month: "long", day: "numeric", }; console.log(event.toLocaleDateString("de-DE", options)); // Expected output (varies according to local timezone): Donnerstag, 20.
🌐
CSS-Tricks
css-tricks.com › everything-you-need-to-know-about-date-in-javascript
Everything You Need to Know About Date in JavaScript | CSS-Tricks
September 22, 2022 - If you want to format several Date objects with the same formatting options, you should use Intl.DateTimeFormat instead: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat With this, your example would be: const localDateString = new Intl.DateTimeFormat("en-US", { year: 'numeric', month: 'long', weekday: 'long' }).format; ... This is great! Thank you for this, this clarified a lot of stuff regarding dates. Even though I love moment.js I might start implementing my own date manipulations!
🌐
freeCodeCamp
freecodecamp.org › news › javascript-date-format-how-to-format-a-date-in-js
JavaScript Date Format – How to Format a Date in JS
November 7, 2024 - Moment.js is a JavaScript date and time library that you can use to quickly format your dates without handling the logic with so many lines of code. To use this library, you have to install the package in your project using any of your preferred options in the documentation.
🌐
Moment.js
momentjs.com › docs
Moment.js | Docs
Display Format Time from now Time from X Time to now Time to X Calendar Time Difference Unix Timestamp (milliseconds) Unix Timestamp (seconds) Days in Month As Javascript Date As Array As JSON As ISO 8601 String As Object As String Inspect
🌐
Delicious-insights
delicious-insights.com › en › posts › js-protip-date-formatting
JS protip: Formatting a date/time according to locale • Delicious Insights
Find out how to easily and cleanly format dates and times in JavaScript whilst honoring locale preferences, all without resorting to third-party libraries!
🌐
Squash
squash.io › how-to-format-javascript-date-as-yyyy-mm-dd
How to Format JavaScript Dates as YYYY-MM-DD
- If you are using a library or framework like Moment.js, you can easily format a JavaScript date using its formatting functions. Moment.js provides a wide range of formatting options, including the ability to format a date as YYYY MM DD.