How to Set a Default Value on "week" input HTML Element?

HTML <input type="week" /> element accepts a value that is in the "YYYY-Www" (ISO8601 week number) format — where:

  • YYYY is the four digit year;
  • - is the (U+002D) year/week separator character;
  • W (in capital letter) is a constant, denoting "week";
  • ww is a two-digit, week of the year string, that's between 01 and 53;
  • A year has 52 weeks, except in the following cases where a year has 53 weeks:
    • The first day of the year (i.e. January 1) is a Thursday, or;
    • The first day of the year (i.e. January 1) is a Wednesday and the year is a leap year.
  • Each week begins on Monday and ends on Sunday.

Therefore, to set a default value on the <input type="week" /> element, you simply need to set the value attribute to the correct format. For example, to set a default value of "Week 36 of 2022", you would write it in the "YYYY-Www" format, like so:

<input type="week" value="2022-W36" />

Similarly, the following would have a default value of "Week 3 of 1999":

<input type="week" value="1999-W03" />

Please note that the visual representation of week picker may vary depending on the user's browser and/or OS.

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.