How To Force The Input Date Format To Dd/mm/yyyy?

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

Solution 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.

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

    }
}

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