<input> elements of type week create input fields allowing easy entry of a year plus the number of the week inside that year (e.g. week 1 to 52).

The control's UI varies in general from browser to browser; cross-browser support is currently a bit limited, with only Chrome/Opera and Edge supporting it at the time of writing. In non-supporting browsers, the control degrades gracefully to a simple <input type="text">.

<input id="week" type="week">

In Chrome/Opera the week control provides slots to fill in week and year values, a calendar UI to select them more easily, and a cross button to empty the control.

The Edge month control is somewhat more elaborate, opening up week and year picker with sliding reels.

Value A DOMString representing a week and year, or empty.
Events change and input.
Supported Common Attributes autocomplete, list, readonly, and step.
IDL attributes value, valueAsDate, valueAsNumber, list.
Methods select(), stepDown(), stepUp().

Value

A DOMString representing the value of the week/year entered into the input. You can set a default value for the input by including a value inside the value attribute, like so:

<label for="week">What week would you like to start?</label>
<input id="week" type="week" name="week" value="2017-W01">

One thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-Www. When the above value is submitted to the server, for example, browsers will display it as Week 01, 2017, but the submitted value will always look like week=2017-W01.

You can also get and set the value in JavaScript using the HTMLInputElement.value property, for example:

var weekControl = document.querySelector('input[type="week"]');
weekControl.value = '2017-W45';

Using week inputs

Week inputs sound convenient at first glance — they provide an easy UI for choosing weeks, and they normalize the data format sent to the server, regardless of the user's browser or locale. However, there are issues with <input type="week"> because browser support is not guaranteed across all browsers.

We'll look at basic and more complex uses of <input type="week">, then offer advice on mitigating the browser support issue later on (see Handling browser support).

Basic uses of week

The simplest use of <input type="week"> involves a basic <input> and <label> element combination, as seen below:

<form>
  <label for="week">What week would you like to start?</label>
  <input id="week" type="week" name="week">
</form>

Controlling input size

<input type="week"> doesn't support form sizing attributes such as size. You'll have to resort to CSS for sizing needs.

Using the step attribute

You should be able to use the step attribute to vary the amount of weeks jumped whenever they are incremented, however it doesn't seem to have any effect on supporting browsers.

Validation

By default, <input type="week"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a week/year — which is helpful — but you can still fill in no value then submit, and you might want to restrict the range of choosable weeks.

Setting maximum and minimum weeks

You can use the min and max attributes to restrict the valid weeks that can be chosen by the user. In the following example we are setting a minimum value of Week 01, 2017 and a maximum value of Week 52, 2017:

<form>
  <label for="week">What week would you like to start?</label>
  <input id="week" type="week" name="week"
         min="2017-W01" max="2017-W52">
  <span class="validity"></span>
</form>

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

The result here is that only weeks between W01 and W52 in 2017 will be seen as valid and be selectable in supporting browsers.

Making week values required

In addition you can use the required attribute to make filling in the week mandatory. As a result, supporting browsers will display an error if you try to submit an empty week field.

Let's look at an example — here we've set minimum and maximum weeks, and also made the field required:

<form>
  <div>
    <label for="week">What week would you like to start?</label>
    <input id="week" type="week" name="week"
         min="2017-W01" max="2017-W52" required>
    <span class="validity"></span> 
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

If you try to submit the form with no value, the browser displays an error. Try playing with the example now:

Here's'a screenshot for those of you who aren't using a supporting browser:

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).

Handling browser support

As mentioned above, the major problem with using week inputs at the time of writing is browser support — Safari and Firefox don't support it on desktop, and old versions of IE don't support it.

Mobile platforms such as Android and iOS make really good use of such input types, providing specialist UI controls that make it really easy to select values in a touchscreen environment. For example, the week picker on Chrome for Android looks like this:

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the most serious — as we mentioned earlier, with a week input the actual value is always normalized to the format yyyy-Www. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people could write week values, for example:

  • Week 1 2017
  • Jan 2-8 2017
  • 2017-W01
  • etc.

The best way to deal with times in forms in a cross-browser way at the moment is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

Examples

In this example we create two sets of UI elements for choosing weeks — a native picker created with <input type="week">, and a set of two <select> elements for choosing weeks/years in older browsers that don't support the native input.

The HTML looks like so:

<form>
  <div class="nativeWeekPicker">
    <label for="week">What week would you like to start?</label>
    <input id="week" type="week" name="week"
           min="2017-W01" max="2018-W52" required>
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">What week would you like to start?</p>
  <div class="fallbackWeekPicker">
    <div>
      <span>
        <label for="week">Week:</label>
        <select id="fallbackWeek" name="week">
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year">
          <option value="2017" selected>2017</option>
          <option value="2018">2018</option>
        </select>
      </span>
    </div>
  </div>
</form>

The week values are dynamically generated.

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="week">, we create a new <input> element, set its type to week, then immediately check what its type is set to — non-supporting browsers will return text, because the week type falls back to type text. If <input type="week"> is not supported, we hide the native picker and show the fallback picker UI (<select>s) instead.

// define variables
var nativePicker = document.querySelector('.nativeWeekPicker');
var fallbackPicker = document.querySelector('.fallbackWeekPicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var yearSelect = document.querySelector('#year');
var weekSelect = document.querySelector('#fallbackWeek');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'week';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the weeks dynamically
  populateWeeks();
}

function populateWeeks() {
  // Populate the week select with 52 weeks
  for(var i = 1; i <= 52; i++) {
    var option = document.createElement('option');
    option.textContent = (i < 10) ? ("0" + i) : i;
    weekSelect.appendChild(option);
  }
}

Specifications

Specification Status Comments
HTML Living Standard
The definition of '<input type="week">' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20 12 No support[1] No support 10.62 No support
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) ? (Yes) (Yes)

[1] This feature is not implemented yet. See bug 888320 and TPE DOM/Date time input types.

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,