Javascript date to string format mm dd yyyy

[How To] Javascript format date to dd mm yyyy in 2023

Need to convert dates to the format DD/MM/YYYY in JavaScript? Check this post for all the ways to this!

Jan 21, 2023 | Read time 10 minutes

🔔 Table of contents

Introduction

Every JavaScript developer will usually go through a date conversion exercise. This can be confusing since theres so many ways to work with dates.

JavaScript dates follow the ISO 8601 standard and RFC 2822 to keep dates and time unambiguous and internationally agreed/ understood upon!

This blog I will go over a few ways to convert dates to the format of DD/MM/YYYY in JavaScript.

Why do we need the ISO 8601 standard?

When dealing with dates, the interpretation of the date can be different depending on where you live.

For example, take the date: 01/05/23. Now if you live in Australia/UK this means it is the 1st May 2023. Now for someon in America (USA) this means January 5, 2023.

This could lead to problems with your app (for example using Australia/UK format dates)- someone visiting your app from in USA thinks a conference date is 4 months ahead 🙂

The standard sets that date formats should be: YYYY-MM-DD

For example, September 27, 2012 is represented as 2012-09-27.

Convert date to DD/MM/YYYY in vanila Javascript

There are a few ways to convert a date to a formatted string of DD/MM/YYYY. Below are four options using vanila JavaScript.

Option 1 — use toLocaleString()

The quickest way to get a date to string format of DD/MM/YYYY is using the toLocaleString() function of the Date object.

The syntax that is accepted is:

An example of how we can use it is as follows:

Now as we can see from the above, the toLocaleString() method also returns the time aswell. To get rid of the time, we just need to use the split method:

Option 2 — use getDate, getMonth and getFullYear

The classic way to get a formatted string from a Date is using the getDate, getMonth and getFullYear date methods. This method is a bit longer than the other one liners, but would be most flexible.

This is because you are building up the date format from scratch and appending it to the final string

  In the above, we just break down the dates with the default date methods

• getFullYear() — this just gets the year — eg 2023
• getMonth() — this gets the month of the year. Keep in mind that it starts with 0 — so January is 0 and December is 11. That is why we need to add 1 to this value.
• getDate() — this gets the day of the month (1 to 31)

Next we have checks to see if the day or month is less than 10. When its less than 10, we just prefix it with ‘0’ — eg for May, instead of just displaying “4”, we show it as “04”!

Finally we combine all those values to make the format DD/MM/YYYY

Option — use toJSON()

We can also use the toJSON() JavaScript method to get our date format of DD/MM/YYYY

1. The next step to to take the date section and leave out the time. We do this with the slice(0,10)
2. Next we take our date string and reverse it. As you can see from step 1, the date has the year first, and we want to have the day first and year last. So we just make it into a array with .split(‘-‘) . Then reverse the array with reverse()

Convert date to DD/MM/YYYY in moment

Moment is a extremely popular library to convert our dates to the format of DD/MM/YYYY.

As an example, we just need to call the format() method to convert our dates:

You can install Moment in the browser or in Node. In the browser we just need to include it in the script tag:

Or if you want to use ES6 syntax (with the export/import keywords):

Warning: Moment is in maintenance mode!

• Does not support tree-shaking — won’t remove code that is not used and therefore results in huge bundle size and causes performance issues.
• Heavy: its minified weight is 67,9Kb.
• Moment objects are mutable. This means that it can be changed without creating an entirely new value. This can lead to random bugs.

The authors have stated that they will only be maintaining Moment — so don’t expect any new features! For new projects probably go with newer libraries like Day.js (https://day.js.org/) or Luxon (https://moment.github.io/luxon/#/)

Note: Even the Chrome Dev team suggest moving away from moment!

To use Day.js, we just do the following:

Then include it in your script:

To see all the format tokens that moment support, have a look here (Day.JS and Luxon should have the same formats too):

• https://momentjs.com/docs/#/parsing/string-format/

Convert date to DD/MM/YYYY in jQuery

If you are using jQuery date conversion should look similar to using the vanila Javascript options.

Using jQuery plugin — jQuery Format Date

If you dont prefer these vanila javascript methods, there are plugins we can use.

One date format plugin in that is available for jQuery is the format date plugin (https://github.com/phstc/jquery-dateFormat)

An example of its use are as follows. We include it in the HTML:

Then in our Javascript, we can use the $.format.date method like so:

 This will output the following:

Using the jQuery UI datepicker

If you are using the DatePicker UI Jquer plugin, it has a format date function that can be used to convert your date to dd/MM/yyyy:

Then in the JavaScript, we can call the $.datepicker.formatDate method:

Summary

Working with dates in JavaScript or any language can be confusing and challenging. With Javascript we can convert dates to the format of dd/MM/yyyy using various techiques such as using only vanila JavaScript, using the moment library, and using jquery plugins or the datepicker in jquery UI.

With vanila Javascript we have a few options to convert dates to the format of dd/MM/yyyy — this includes using the toLocaleString method, use the toISOString, and the default Date functions of getDate, getMonth, getFullYear.

The simpliest way to convert dates is using the popular javascript library: Moment. However keep in mind that Moment is a legacy project in maintenance mode. It is not dead, but the authors are not making any more updates!

If you are on new projects consider using more modern libraries like Day.JS or Luxon!

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

How to convert date to string dd/mm/yyyy format in Javascript and Node.js

There are many ways to convert date to string in Javascript. In this post, I will show you a few ways to format date in Javascript/Node.js to string in dd/mm/yyyy format with code example.

Using plain JavaScript #

These below examples will show you how to convert today date in Javascript to string in mm/dd/yyyy format.

var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; console.log(today); 

The output will be (the date of writing this post):

Of course you can change the order of month and day to your preference. For example, you can use the below code to convert date to string in dd/mm/yyyy format.

today = dd + '/' + mm + '/' + yyyy; console.log(today); 

The output will be (the date of writing this post):

If you prefer using hyphen instead of slash, you can use the below code to convert date to string in dd-mm-yyyy format.

today = dd + '-' + mm + '-' + yyyy; console.log(today); 

Ouput will be (the date of writing this post):

Tip: If you just need the date in yyyy-mm-dd format, you can use the below code to convert date to string in yyyy-mm-dd format.

let today = new Date() today = today.toISOString().split('T')[0] 

Output will be (the date of writing this post):

Using moment.js #

moment.js is a JavaScript library for parsing, validating, manipulating, and formatting dates and times. You can use it to convert date to string in dd/mm/yyyy format.

var today = moment().format('DD/MM/YYYY'); console.log(today); 

The output will be (the date of writing this post):

It is very easy to use moment.js to convert date to string in dd/mm/yyyy format. To change your date format, just change the format string in the format() method. Here is another example to convert date to string in yyyy-mm-dd format.

var today = moment().format('YYYY-MM-DD'); console.log(today); 

Using date-fns #

date-fns is modern JavaScript date utility library. date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. To get started with date-fns , please visit date-fns website.

It is very easy to use date-fns to convert date to string in dd/mm/yyyy format.

import  format > from 'date-fns' var day = format(new Date(2021, 11, 19), 'MM/dd/yyyy') //=> '11/19/2021' console.log(day); 

For more format string, please visit date-fns format.

Using day.js #

day.js is a fast 2kB alternative to Moment.js with the same modern API. To learn more about how to install and use day.js , please visit day.js website.

You can use day.js to convert date to string in dd/mm/yyyy format.

dayjs('2021-11-19').format('DD/MM/YYYY') // '19/11/2021' 

For more format string, please visit day.js format.

So those are 4 ways to format Javascript date to string in dd/mm/yyyy format or any other format you want. Use them to your advantage.

Источник