How to set date format in HTML date input tag?

html date input format
Piotr picture Piotr · Aug 8, 2011 · Viewed 503.7k times · Source

I am wondering whether it is possible to set the date format in the html <input type="date"></input> tag... Currently it is yyyy-mm-dd, while I need it in the dd-mm-yyyy format.

Answer

ashish bhatt picture ashish bhatt · Sep 2, 2015

I found same question or related question on stackoverflow

Is there any way to change input type=“date” format?

I found one simple solution, You can not give particulate Format but you can customize Like this.

HTML Code:

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

CSS Code:

#dt{text-indent: -500px;height:25px; width:200px;}

Javascript Code :

function mydate()
{
  //alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
 d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}

Output:

enter image description here

Related questions

Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to set input type date's default value to today?

The HTML5 input types are great, Opera's new built-in date picker is a breeze, and Chrome has at least supported the new input type with a spin-wheel implementation. But is there any way to set the default value of the …

Read More
Implement an input with a mask

I would like to implement a mask for a text input field which accepts a date. The masked value should display directly inside of the input. Something like this: <input type='text' value='____/__/__'> I wrote the …

Read More