How to set date format in HTML date input tag?

user_750325 0
Viewed 574483

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.

format date input html
14 Answers

I made a lot of research and I don't think one can force format of the <input type="date">. The browser select the local format, and depending on user settings, if the user's language is in English, the date will be displayed to the English format (mm/dd/yyyy).

In my opinion, the best solution is to use a plugin to control the display.

Jquery DatePicker seems a good option since you can force the localization, date format ...

user_88814950

I came up with a slightly different answer than anything above that I've read.

My solution uses a small bit of JavaScript and an html input.

The Date accepted by an input results in a String formatted as 'yyyy-mm-dd'. We can split it and place it properly as a new Date().

Here is basic HTML:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

Here is basic JS:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

You can format the date any way you like. You can create a new Date() and grab all the info from there... or simply use 'userDate[]' to build your string.

Keep in mind, some ways that a date is entered into 'new Date()' produces an unexpected result. (ie - one day behind)

user_98408630

For formatting in mm-dd-yyyy:

 aa = date.split("-")

 date = aa[1]+'-'+aa[2]+'-'+aa[0]
user_42946820

Here's one option. When the user is entering the date, the function reformats it. When they click the submit button, it populates the result div with the date in the format you're looking for.

<div id="result"></div>
<p>Enter some text:
<input type="date" name="txt" id="datefield" onchange="dateval(value)"></p>
<button onclick="postdate()">submit</button>

<script>
var a;

// Set the *value* of the input element to
// yyyy-mm-dd (text is unchanged)
function dateval(val) {
    var dv = document.getElementById("datefield");
    a = val.split("-").reverse().join("-");
    dv.type = "text";
    dv.value = a;
}

// Extract the yyyy-mm-dd value from the inpuut element,
// format it to dd-mm-yyyy and put it in the div
function postdate() {
    var dv = document.getElementById("datefield");
    var z = a.split("-").reverse().join("-");
    document.getElementById("result").innerHTML = a;
    dv.type = "date";
    dv.value = z;
}
</script>
user_114160190

short direct answer is no or not out of the box but i have come up with a method to use a text box and pure JS code to simulate the date input and do any format you want, here is the code 

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- please note that this method only work for browser that support date type.

2- the first function in JS code is for browser that don't support date type and set the look to a normal text input.

3- if you will use this code for multiple date inputs in your page please change the ID "xTime" of the text input in both function call and the input itself to something else and of course use the name of the input you want for the form submit.

4-on the second function you can use any format you want instead of day+" / "+month+" / "+year for example year+" / "+month+" / "+day and in the text input use a placeholder or value as yyyy / mm / dd for the user when the page load.

user_53470460

We can change this yyyy-mm-dd format to dd-mm-yyyy in javascript by using split method.

let dateyear= "2020-03-18";
let arr = dateyear.split('-') //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format
user_130940430

Here is the solution: 

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

hopefully this will resolve the issue :)

user_58592070
Related