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

#javascript #react #codenewbie #node

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.

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)

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

Get Formatted Date



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

Get Date and Time



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

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

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

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

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.