How to limit the interval between two dates in the <input type="Month">?

Question

Although there are 3 questions I believe that all apply to the same case about the "range/range"

• It is possible to limit the "range" between two dates in the <input type="month">?

• If yes, there is some mandatory format standard that we should follow when passing values that limit?

• This "limit" is supported by which browsers and mobile devices?

Answer 1

It is possible to limit the "range" between two dates in the <input type="month">?

Yes, it is possible to limit the "range" between two dates. For this you can use the attribute min and max. Take an example:

<input type="month" value="2018-09" min="2018-01" max="2018-12"> 

In the previous example we are limiting the question so that the user can only choose the month in the year 2018, between January and December.

If yes, there is some standard format required that we should follow by passing values that limit?

The required format standard we must follow when using the attribute min, max or even the value is as follows: YYYY-MM.

Where Y is the year, in case 2018, and M is the month, in this case 09. Soon, would be: 2018-09.

This "limit" is supported by which browsers and mobile devices?

Desktop only Chrome/Opera and Edge support.

On mobile most modern browsers support.

Note: where it is marked in red means that there is no support, the green symbolizes that the browser supports the tag.

According to the kennel currently 86.66% of browsers support (partially or fully) the attribute, between desktop and mobile.

References:

MDN

Answer 2

It is possible to limit the "range" between two dates in the <input type="month">?

You can use the attributes min and max.

Thus:

 <input id="aniversario" type="month" name="aniversario"
     min="1900-01" max="1999-12">

If yes, there is some mandatory format standard that we should follow when passing values that limit?

In the case of [type=month], The format needs to be YYYY-MM (where YYYY is 4 digit year and MM is the month with two digits).

This "limit" is supported by which browsers and mobile devices?

According to the compatibility table of MDN, support is not yet complete.

In my Firefox, for example, it didn’t work. And there is a bug has been informed of such input.

Also, Internet Explorer and Safari are not supported yet.

On Android, it seems that Firefox also has no support.

Validation

In addition, the MDN warns about data entry validation:

By default, input[type="month"] does not apply any validation to the entered values. User interface implementations usually do not allow you to enter anything other than a date, which is useful, but you can still submit the form with the empty entry or enter an invalid date (for example, on April 32).

Polyfill

I found a Polyfill to the input[type=month], but it seems to me that the same depends on jQuery (thing that I do not like very much).