HTML5 input date type is not storing in a consistent format

I am having an issue when using the HTML5 input fields with type set to "date".

My test page is as follows:

<!DOCTYPE html>
<html>

<head>
    <script>
    function testDate() {  
       window.alert("Date: " + document.getElementById("date").valueAsDate.toJSON());
    }
    </script>
</head>

<body>
    <form>
      <label for="date">Date</label>
      <input id="date" type="date" onchange="testDate()" required />
    </form>
</body>

</html>

If I load this page in Opera, I am presented with a 'date picker'. If I select the 10th of August 2016, I am presented with a popup window which exhibits the correct behavior i.e. it displays the following:

"Date: 2016-06-10T00:00:00.000Z"

If I load the page in Firefox, I do not get any kind of 'date picker' and it will let me enter any value I want. I have tried the following input:

10/08/2016
10-08-2016
2016-08-10

In all cases I get the following logged to the console:

TypeError: document.getElementById(...).valueAsDate is undefined

In my real code, I simply want to allow a user to select a date, convert it to a JSON date, and then send it over an XMLHttpRequest, but I can't seem to find any consistency in the date format.

Can someone assist?

Solution

Currently it is too soon for using the fields if you are not creating the browser-specific web application. As you can see here - Firefox, Safari and Internet Explorer has no support for this kind of input fields.

You can try to use the pattern attribute which can be used for a simple validation of the user input. It has a better support, but still it is not perfect.

You can also try to use one of these vanillaJS datepicker implementations.