HTML5 input types not working in IE10

Question

I´m writing an application that deals massively with dates.

So, I´m using the new HTML5 input types for datetime, date, month and week...

Surprisingly I found out this is not working on IE10. I´m using IE version 10.0.9200.

To check this out, please open that page: Test Link

My typical input type looks like (I´m using Tweeter Bootstrap as well):

            <div class="col-md-8">
                <div class="form-group">
                    <label for="dateTime">Período do Relatório</label>
                    <input type="date" class="form-control" id="reportDate">
                </div>
                <script>
                    var isoString = toLocalIsoString(new Date());
                    document.getElementById("reportDate").value = isoString.substr(0, 10);
                </script>
            </div>

And them later I chage the type I need, like:

            document.getElementById('reportDate').type = 'week';

or

            document.getElementById('reportDate').type = 'month';

In Chrome it works real nice, opening choose windows for the user to choose the month on week, but in IE I get the following error (translated):

0x80070057 - Javascript execution time error. Invalid argument.

So, according to this scenario:

a) I´m doing something wrong here ?

b) If not, how can I support these HTML5 in IE10.

c) If in fact this will not work in IE10, what are the alternatives to have a Chrome like behaviour (popup a small windows so that the user chooses the month, date, week, etc.).

Thanks in advance for any help.

Answer 1

According to Can I Use the date-time input types are not supported by IE. A good alternative would be jQuery UI .

Answer 2

Perhaps Internet Explorer and Firefox do not support it .Check the link here!

http://www.w3schools.com/html/html5_form_input_types.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

For the last link check Browser compatibility at the end of the page

Answer 3

根据quirksmode ，HTML5高级表单标记功能（例如日期）不受广泛支持。

Answer 4

Date inputs are not supported by majority browsers.

Since you already use Bootstrap in your project I would recommend to use bootstrap-datepicker javascript plugin.

Answer 5

Had this issue with Angular JS (all cool kids use it). Short term fix is to include a script ref to babel-es6-polyfill in your index.html. Looking at typescript for future implementations.

 <script src="node_modules/babel-es6-polyfill/browser-polyfill.min.js"></script>