How to Set Min/Max Value on "month" input HTML Element?

To limit the range of values that can be added to an HTML <input type="month"> element, you can add the following attributes on it (as per your need):

  • min — to set the lower-bound limit on the year-month pairing the user can add;
  • max — to set the upper-bound limit on the year-month pairing user can add.

Values for either attribute needs to be in the same format as it is for the value attribute — i.e. "YYYY-MM". If an invalid value is specified for either of these attributes, it is ignored.

For example, to limit an <input type="month"> element to a minimum year-month pairing of "1950-01" and a maximum year-month pairing of "2010-12", you would do the following:

<input type="month" min="1950-01" max="2010-12" />

If you specify both, the min and the max attribute, then make sure:

  • min year-month pairing is either earlier than or equal to the max attribute, and;
  • max year-month pairing is either later than or equal to the min attribute.

Before you use the <input type="month"> element, please make sure that you're aware of the browser support.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.