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 themax
attribute, and;max
year-month pairing is either later than or equal to themin
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.