How to force 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 gives me a headache. The system will be used only for users from Brazil, then the date format should be dd / mm / yyyy. When accessing the site from a Portuguese computer, the date of the type field of the HTML form works the way I want. But when you access the site in computer language, the date format in English becomes yyyy-mm-dd. This is a problem because sometimes the user does not even notice that the date format of your computer is changed, but the user wants to see the date in dd / mm / yyyy format.

I need the format to be dd / mm / yyyy regardless of the computer’s settings for accessing the site and without using any additional javascript library.

Used code:

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

Answer 1

There is no such thing. input type=date display all your system defaults and show that in the GUI, but will always store the value in ISO format (yyyy-mm-dd). Also, keep in mind that not all browsers support this, so it is not recommended to depend on this type of input yet.

If this is a corporate problem, force the entire computer to use the local regional format (dd-mm-yyyy), and your user interface will display it in this format (see the wufoo link earlier after changing the regional settings, you need to open the browser again).

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

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

• See http://www.w3.org/TR/html-markup/input.date.html for a specification. <- no format attr.

It’s best to use a JavaScript component that allows you to customize it to whatever you want.

Answer 2

In order to have a constant date format regardless of computer settings, you must use 3 different input elements to record the day, month and year, respectively. However, you need to check the user login to make sure you have a valid date, as shown below.

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

Answer 3

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