Input type date format dd-mm-yyyy javascript

Description

format the input date format to dd/mm/yyyy

Table of Contents Show

Description
Related Tutorials
The Problem
The Solution
How do you change input type format to DD MMM YYYY?
What date format is dd mm yyyy in Javascript?
How do I format a date in Javascript?
What is the format of input type date?

Demo Code

ResultView the demo in separate window

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w  w.j a v a  2  s.  com*/
//dd/mm/yyyy
var date = new Date();
console.log(date);
var month = date.getMonth();
console.log(month);
var day = date.getDate();
console.log(day);
var year = date.getFullYear();
console.log(year);
console.log(month+"/"+day+"/"+year);
    }

      </script> 
   </head> 
   <body> 
      <input type="date" id="date">  
   </body>
</html>

convert a date in a text box into a (dd/mm/yy) format
Date Format Conversion for comparison
Format date from UTC string
Change date format string by a function and string replace
compare 2 time in format (HH:MM:SS)

Getting date formats right in JavaScript can be a challenge — especially when there are many different input and output formats. There are some JavaScript packages that can help with this task but it might be hard to justify the package size for a simple date string. Sometimes it is better to keep things simple so in this blog you will learn how to format a date as DD/MM/YYYY using pure JavaScript.

The Problem

JavaScript dates use the ISO standard by default. This means that if you simply want a string for a date using native JavaScript methods, you will be faced with a couple different options that are meant to keep things as standardized as possible.

const today = new Date('2022', '2', '28'); console.log(today.toString()); // Mon Mar 28 2022 00:00:00 GMT-0400 (Eastern Daylight Time) console.log(today.toDateString()); // Mon Mar 28 2022 console.log(today.toISOString()); // 2022-03-28T04:00:00.000Z console.log(today.toLocaleDateString()) // 3/28/2022 (depending on locale)

These are all great at what they do but what if you specifically need the DD/MM/YYYY format? Using toLocaleDateString() is close but its format varies based on the browser’s time zone and language.

You could use the ISO version of the date string provided by toISOString() to perform a few string operations to move around the dates. This is a potentially usable solution but perhaps not the most clear or concise. There must be something better.

The Solution

The most straightforward way to create a date string in DD/MM/YYYY format involves using a few native get() methods and some simple logic. The first step is to get the date’s month, date, and year. Be careful here — JavaScript months are 0 based so you’ll need to increment the month by one.

let date, month, year; date = inputDate.getDate(); month = inputDate.getMonth() + 1; // take care of the month's number here ⚠️ year = inputDate.getFullYear();

Once you have these values you can add 0’s to the month and date where necessary:

if (date < 10) { date = '0' + date; } if (month < 10) { month = '0' + month; }

If you prefer a newer ES2017 approach, you can refactor the logic above by utilizing the padStart() method. This is a native string method first introduced with ES2017 that accepts the desired length as the first parameter and the string to fill with as the second parameter. In this case, you want the value of the month or date to always be exactly two digits long so that will be the first parameter. The value should either start with 0 or naturally be two digits long so 0 will be the second parameter as follows:

date = date .toString() .padStart(2, '0'); month = month .toString() .padStart(2, '0');

Put these values together and you’ll have your date formatted as a DD/MM/YYYY string:

console.log(`${date}/${month}/${year}`); // 28/03/2022

That’s it! One great thing about this solution is that since you have all three parts of the date broken up, you can easily use this logic to create any desired date string format. Using dates can be tricky in general and JavaScript’s native solutions are not exactly intuitive for every use case. Fortunately, it is simple enough to get the date format you want with only a few lines of code.

Here is the full solution:

Bonus

For those of you who enjoy finding fun one-liners to use in their code, there is actually a more elegant solution to formatting a date as DD/MM/YYYY. Remember the toLocaleDateString() method mentioned earlier? It accepts a locale string as a parameter. If you use the British English locale of 'en-GB' you’ll get the format you wanted in just one line of code.

const result = new Date('2022', '2', '28').toLocaleDateString('en-GB'); console.log(result); // 28/03/2022

How do you change input type format to DD MMM YYYY?

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.

What date format is dd mm yyyy in Javascript?

To format a date as dd/mm/yyyy: Use the getDate() , getMonth() and getFullYear() methods to get the day, month and year of the date. Add a leading zero to the day and month digits if the value is less than 10 . Add the results to an array and join them with a forward slash separator.