Signup/Sign In

How to create a date picker of format "YYYY-MM" in HTML?

The date picker generally has the format "yyyy-mm-dd". Here we need to enter the day, month,h, and year to the date picker. But there is yet another format in the date picker where we need to enter only year and month. The date picker with format="YYYY-MM" can be created using HTML.

Create a date picker with the format "YYYY-MM"

To create a date picker with "YYYY-MM" format, use <input> tag with type="month" attribute. We can also use some other attributes along with it. The date picker with type="month" is not supported in all the browsers. The user interface of the date picker also varies from browser to browser.

Example: Create date picker using HTML

Date Picker Attributes

  • min - To add the earliest date to the date picker. The format used for min is the same as date picker format "YYYY-MM"
  • max - To add the late date to the date picker. The format used for max is "YYYY-MM".
  • value - The value attribute is used to set the default date within the input field. The format used is "YYYY-MM".

Example: Create date picker with attributes


The date picker provides a user-friendly interface to enter the dates. The date picker also allows entering the date in a particular format. Here, we have created date picker with only year and month.

About the author: