How to set date format in HTML date input tag ?

How to set date format in HTML date input tag ?

Asked on December 20, 2018 in HTML / CSS.
Add Comment


  • 6 Answer(s)

    The only way to solve this question is using jquery.
    And in the jquery , there is a suitable jquery plugin is jQuery Masked Input

    Answered on December 20, 2018.
    Add Comment

    Here is the answer,

    Actually there is no way to change input type=“date” format.But we can customize that,

    Look at the code below,

    This is the 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>
    

    Here is the CSS Code:

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

    Here is the 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;
    }
    

    And finally the output is ,

    enter image description here

    Answered on December 20, 2018.
    Add Comment

    We can use this normal method,

    document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
    
    

    otherwise use this new method in jquery,

    $("#dateField").val(new Date().toISOString().substring(0, 10));
    
    Answered on December 20, 2018.
    Add Comment

    $(‘input[type=”date”]’).change(function(){ alert(this.value.split(“-“).reverse().join(“-“)); })

    Answered on January 27, 2019.
    Add Comment
    Answered on February 9, 2019.
    Add Comment

     

    here is a simple code to set date format

    <!DOCTYPE html>
    <html>
    <body>

    <p>I have a date on <time datetime=”2017-02-14 20:00″>happiest  day</time>.</p>

    <p><b>Note:</b> The time element does not render as anything special in any of the major browsers.</p>

    <p><strong>Note:</strong> The time tag is not supported in Internet Explorer 8 and earlier versions.</p>

    </body>
    </html>

    Answered on February 20, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.