search

Home  >  Q&A  >  body text

How to customize date format in HTML date input tag?

<p>I would like to know if it is possible to set the date format in the <code><input type="date"></input></code> tag in html... currently it is yyyy-mm -dd format, and what I need is dd-mm-yyyy format. </p>
P粉709644700P粉709644700519 days ago641

reply all(1)I'll reply

  • P粉505917590

    P粉5059175902023-08-22 11:21:49

    I found the same question or related question on stackoverflow

    I found a simple solution, you can't give a specific format, but you can customize it as follows.

    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:

    reply
    0
  • Cancelreply