DEV Community

Cover image for How to Display Formatted Date in JavaScript Without Using Any External Library
Yogesh Chavan
Yogesh Chavan

Posted on • Originally published at blog.yogeshchavan.dev

How to Display Formatted Date in JavaScript Without Using Any External Library

In most of the applications, we need to display a formatted date like 18 June 2021 or 06/18/2021 along with the time.

So we normally use moment.js or date-fns or day.js library to get that done.

But using an external library adds a lot of extra code to the final size of the application.

For example, the moment.js npm library is about 4.21MB in unpacked size.

moment_statistics.png

So even If you use it only once for single formatting, your final application bundle size will increase which will affect your application loading time.

Also, Moment.js is now a legacy project(in maintenance mode) from Oct 2020.

So in this article, we'll see how to display the date in a formatted way using just JavaScript without using any external libraries.

So let's get started.

Using Date.prototype.toLocaleDateString

It has the following syntax:

toLocaleDateString(locales, options)
Enter fullscreen mode Exit fullscreen mode

The toLocaleDateString method accepts a set of options and returns a date portion of the given Date instance according to language-specific conventions.

  • locales can take en-US, en-GB etc which is a language specific code.
  • options is an object where we specify which part of date we want like date, year, month etc.

Get Only Date

const date = new Date().toLocaleDateString('en-US');
console.log(date); // 6/18/2021
Enter fullscreen mode Exit fullscreen mode

Get Formatted Date

const date = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
console.log(date); // June 18, 2021
Enter fullscreen mode Exit fullscreen mode

Get Date and Time

const date = new Date().toLocaleDateString('en-US', {
            hour: 'numeric',
            minute: 'numeric'
          });
console.log(date); // 6/18/2021, 10:30 AM
Enter fullscreen mode Exit fullscreen mode

Get Formatted Date and Time

const date = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });
console.log(date); // June 18, 2021, 10:30 AM
Enter fullscreen mode Exit fullscreen mode

Get Formatted Date and Time Including Seconds

const date = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  });
console.log(date); // June 18, 2021, 10:30:54 AM
Enter fullscreen mode Exit fullscreen mode

Get Formatted Date and Time Including Weekday

const date = new Date().toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  });
console.log(date); // Friday, June 18, 2021, 10:30:52 AM
Enter fullscreen mode Exit fullscreen mode

The possible options values are as shown below:

  • weekday: long, short, narrow
  • era: long, short, narrow
  • year: numeric, 2-digit
  • month: numeric, 2-digit, long, short, narrow
  • day: numeric, 2-digit
  • hour: numeric, 2-digit
  • minute: numeric, 2-digit
  • second: numeric, 2-digit
  • timeZoneName: long, short

Thanks for reading!

Check out my recently published Mastering Redux course.

In this course, you will learn:

  • Basic and advanced Redux
  • How to manage the complex state of array and objects
  • How to use multiple reducers to manage complex redux state
  • How to debug Redux application
  • How to use Redux in React using react-redux library to make your app reactive.
  • How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Oldest comments (6)

Collapse
 
ash_bergs profile image
Ash

Helpful and succinct! Thanks for writing โœ๐Ÿ˜Š

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • Edited

Glad you found it helpful. Thank you ๐Ÿ‘

Collapse
 
mohdahmad1 profile image
Mohd Ahmad

๐Ÿ˜๐Ÿ˜ This article is great. but if we want advanced features we can use dayjs it is 2k gzipped only

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Yes, that's right ๐Ÿ‘

Collapse
 
kirantdv profile image
kiran tadisetti

Awesome, very helpful..

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan

Glad to hear that. Thank you ๐Ÿ‘