DEV Community

loading...
Cover image for How to Display Formatted Date in JavaScript Without Using Any External Library

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

Yogesh Chavan
Full Stack Developer | JavaScript | React | Nodejs. Subscribe to get weekly newsletter with amazing tips, tricks and articles directly in your inbox https://yogeshchavan.dev/
Originally published at blog.yogeshchavan.dev ・3 min read

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.

Discussion (6)

Collapse
zakiazfar 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 Author

Yes, that's right 👍

Collapse
ash_bergs profile image
Ash

Helpful and succinct! Thanks for writing ✍😊

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author • Edited

Glad you found it helpful. Thank you 👏

Collapse
kirantdv profile image
kiran tadisetti

Awesome, very helpful..

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Glad to hear that. Thank you 👏