How to force the input date format to dd/mm/yyyy? [duplicate]

Question

I have a little problem. I am developing a web system and the form field type date is giving me a headache. The system will be for Brazil only users, then the date format should be dd/mm/yyyy. When access the site from a computer with the Portuguese language, the date of the HTML form field type works the way I want. But when access the site in a computer language English date format becomes yyyy-mm-dd. This is a problem because sometimes user does not even notice that your computer's date format is changed, but the user wants to see the date in the format dd/mm/yyyy.

What I need is that the format is dd/mm/yyyy regardless of machine settings to access the site, and without using any additional javascript library.

The code used is:

<input type="date" id="date">

Answer 1

No such thing. the input type=date will pick up whatever your system default is and show that in the GUI but will always store the value in ISO format (yyyy-mm-dd). Beside be aware that not all browsers support this so it's not a good idea to depend on this input type yet.

If this is a corporate issue, force all the computer to use local regional format (dd-mm-yyyy) and your UI will show it in this format (see wufoo link before after changing your regional settings, you need to reopen the browser).

• See: http://www.wufoo.com/html5/types/4-date.html for example

• See: http://caniuse.com/#feat=input-datetime for browser supports

• See: https://www.w3.org/TR/2011/WD-html-markup-20110525/input.date.html for spec. <- no format attr.

Your best bet is still to use JavaScript based component that will allow you to customize this to whatever you wish.

Answer 2

To have a constant date format irrespective of the computer settings, you must use 3 different input elements to capture day, month, and year respectively. However, you need to validate the user input to ensure that you have a valid date as shown bellow

<input id="txtDay" type="text" placeholder="DD" />

<input id="txtMonth" type="text" placeholder="MM" />

<input id="txtYear" type="text" placeholder="YYYY" />
<button id="but" onclick="validateDate()">Validate</button>


  function validateDate() {
    var date = new Date(document.getElementById("txtYear").value, document.getElementById("txtMonth").value, document.getElementById("txtDay").value);

    if (date == "Invalid Date") {
        alert("jnvalid date");

    }
}