HTML, FORMAT A DATE AS DD/MM/YYYY IN JAVASCRIPT

Many applications you build will have some sort of a date component, whether it"s the creation date of a resource, or the timestamp of an activity.

Dealing with date and timestamp formatting can be exhausting. In this guide, you will learn how khổng lồ get the current date in various formats in JavaScript.

Bạn đang xem: Html, format a date as dd/mm/yyyy in javascript

JavaScript"s Date Object

JavaScript has a built-in Date object that stores the date and time and provides methods for handling them.

To create a new instance of the Date object, use the new keyword:

const date = new Date();The Date object contains a Number that represents milliseconds passed since the Epoch, that is 1 January 1970.

You can pass a date string to lớn the Date constructor khổng lồ create an object for the specified date:

const date = new Date("Jul 12 2011");To get the current year, use the getFullYear() instance method of the Date object. The getFullYear() method returns the year of the specified date in the Date constructor:

const currentYear = date.getFullYear();console.log(currentYear); //2020Similarly, there are methods for getting the current day of the month và the current month:

const today = date.getDate();const currentMonth = date.getMonth() + 1; The getDate() method returns the current day of the month (1-31).

The getMonth() method returns the month of the specified date. One point to cảnh báo about the getMonth() method is that it returns 0-indexed values (0-11) where 0 is for January và 11 for December. Hence the addition of 1 khổng lồ normalize the month"s value.

Date now

now() is a static method of the Date object. It returns the value in milliseconds that represents the time elapsed since the Epoch. You can pass in the milliseconds returned from the now() method into the Date constructor khổng lồ instantiate a new Date object:

const timeElapsed = Date.now();const today = new Date(timeElapsed);

Formatting The Date

You can format the date into multiple formats (GMT, ISO, and so on) using the methods of the Date object.

The toDateString() method returns the date in a human readable format:

today.toDateString(); // "Sun Jun 14 2020"The toISOString() method returns the date which follows the ISO 8601 Extended Format:

today.toUTCString(); // "Sat, 13 Jun 2020 18:30:00 GMT"The toLocaleDateString() method returns the date in a locality-sensitive format:

Custom Date Formatter Function

Apart from the formats mentioned in the above section, your application might have a different format for data. It could be in yy/dd/mm or yyyy-dd-mm format, or something similar.

To tackle this problem, it would be better to lớn create a reusable function so that it can be used across multiple projects.

Xem thêm: file php w3

So in this section, let"s create a utility function that will return the date in the format specified in the function argument:

const today = new Date();function formatDate(date, format) //formatDate(today, "mm/dd/yy");You need to replace the strings "mm", "dd", "yy" with the respective month, day và year values from the format string passed in the argument.

To vì chưng that you can use the replace() method lượt thích shown below:

format.replace("mm", date.getMonth() + 1);But this will lead to a lot of method chaining and make it difficult lớn maintain as you try to lớn make the function more flexible:

format.replace("mm", date.getMonth() + 1) .replace("yy", date.getFullYear()).replace("dd", date.getDate());Instead of chaining methods, you can make use of regular expression with the replace() method.

First create an object that will represent a key-value pair of the substring and its respective value:

const formatMap = mm: date.getMonth() + 1, dd: date.getDate(), yy: date.getFullYear().toString().slice(-2), yyyy: date.getFullYear();Next, use regular expression khổng lồ match and replace the strings:

formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map);The complete function looks lượt thích this:

function formatDate(date, format) yyy/gi, matched => map)You can also địa chỉ cửa hàng the ability to lớn format timestamps in the function.

Conclusion

I hope you now have a better understanding of the Date object in JavaScript. You can also use other third-party libraries lượt thích datesj & moment lớn handle dates in your application.

Until next time, stay safe & keep hustling.


*
Vijit Ail

I'm a Full Stack Developer based in Mumbai who loves to lớn build modern & performant applications. Https://vijitail.dev/


obatambeienwasirherbal.com is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: lớn help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available lớn the public. We also have thousands of obatambeienwasirherbal.com study groups around the world.

Donations to lớn obatambeienwasirherbal.com go toward our education initiatives, và help pay for servers, services, & staff.