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

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">

here is a smiliar question: http://stackoverflow.com/questions/6978631/how-to-set-date-format-in-html-date-input-tag — dippas, Apr 26 '15 at 03:06

score 6 · Answer 1 · edited Aug 30 '18 at 11:25

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.

score 2 · Answer 2 · answered Apr 26 '15 at 12:54

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");

    }
}

If you're going to have separate inputs, you should have a dropdown list at least for the month, displaying the names of the months (or abbreviations thereof). That way the controls speak for themselves, including in older browsers that don't recognise `placeholder`. Furthermore, make sure your server-side script rejects 2-digit years. This way, if someone tries to use YMD format then it will catch the error, and it also eliminates any chance of century ambiguity. — Stewart, Oct 04 '19 at 12:12

score -10 · Answer 3 · edited Apr 26 '15 at 07:29

-10

DEMO : http://jsfiddle.net/shfj70qp/

//dd/mm/yyyy 

var date = new Date();
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();

console.log(month+"/"+day+"/"+year);

edited Apr 26 '15 at 07:29

Shaunak D

20,588
10
46
79

answered Apr 26 '15 at 06:38

Shelly

355
1
7

I think you need to re-read the question. – powerbuoy Apr 26 '15 at 07:39

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

3 Answers3

Linked