Usage of html5 <input type="month"> for different browsers

Question

I would like to create an input field which lets the user select a month and a year. HTML5 introduced the input type "month" which suits my problem. It works fine in Chrome, Opera and Edge ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month ).

If the user is using Firefox (or IE or any older Browser version), the input field doesn't show a date picker but instead expects a plain text input.

How can I implement my form in a way, that if the current browser supports input type="month", it shows the native browser datepicker, and if that's not the case, it shows a custom date picker? I expect the input type="month" to work in future Firefox versions and would like to automaticly use that functionality once it exists.

What would be the best way to implement a custom date picker?

I'm already using JQuery in my project. Furthermore I'm using Laravel, although I don't think that Laravel offers any utily in that regard.

Answer 1

Yes HTML5 elements are not supported on the old browsers. You can't expect new technologies to work on old systems. :)

So as you already know you can use a custom date picker. And I will recommend http://www.daterangepicker.com/ , as I have been using it for some time now.Pretty stable.

Not recommending jQueryUI datepicker anymore, as it come with lot of other stuff as a bulk and it will slowdown your app loading time.

Give shot to daterangepicker it will solve your issue. ;)

Answer 2

In browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">

You can iterate over all the input elements with [type=month] and check what their actual type property says:

document.querySelectorAll(`input[type=month]`).forEach((inp) => {
  if (inp.type === 'text') {
    // whatever, e.g. initialize the custom datepicker
  }
});

Answer 3

是否可以显示您指定的日历（ http://www.daterangepicker.com/, ），只显示月份和年份，而不显示日期？