<input type="week">

<input> элементы типа week создают поля ввода, позволяющие легко ввести год и номер недели ISO 8601 в этом году (т. е. с недели 1 по 52 или 53).

Интерфейс управления элементом варьируется в зависимости от браузера; поддержка кроссбраузерна в настоящее время немного ограничена, и на данный момент её поддерживают только Chrome/Opera и Microsoft Edge. В браузерах, не поддерживающих этот элемент, он корректно деградирует до функционирования аналогично <input type="text">.

Строка, представляющая значение введённой недели/года. Формат значения даты и времени, используемый этим типом ввода, описан в Строках дат.

Вы можете задать значение по умолчанию для элемента ввода, включив значение в атрибут value, как показано ниже:

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

Следует отметить, что отображаемый формат может отличаться от фактического value, который всегда отформатирован yyyy-Www. При отправке вышеуказанного значения на сервер браузеры могут отображать его как Week 01, 2017, но отправленное значение всегда будет выглядеть как week=2017-W01.

Вы также можете получить и установить значение с помощью JavaScript, используя свойство элемента ввода value, например:

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

Помимо атрибутов, общих для элементов <input>, ввод недели предлагает следующие атрибуты.

Самый поздний (по времени) год и номер недели в строковом формате, обсуждаемом в разделе Значение выше, для принятия. Если значение value, введённое в элемент, превышает это значение, элемент не проходит проверку валидации ограничений. Если значение атрибута max не является корректной строкой недели, то у элемента нет максимального значения.

Это значение должно быть больше или равно году и неделе, указанным атрибутом min.

Самый ранний год и неделя для принятия. Если value элемента меньше этого значения, элемент не проходит проверку валидации ограничений. Если для min задано значение, которое не является корректной строкой недели, у элемента нет минимального значения.

Это значение должно быть меньше или равно значению атрибута max.

Булевый атрибут, который, если он присутствует, означает, что это поле нельзя редактировать пользователю. Однако его value можно изменить с помощью кода JavaScript, напрямую устанавливая свойство HTMLInputElement value.

Атрибут step — число, которое задаёт шаг, которого должно придерживаться значение, или специальное значение any, описанное ниже. Только значения, равные основе шага (min, если задано, value в противном случае, и соответствующее значение по умолчанию, если ни то, ни другое не задано), являются допустимыми.

Строковое значение any означает, что шаг не подразумевается, и любое значение разрешено (за исключением других ограничений, таких как min и max).

Для элементов ввода week, значение step задаётся в неделях, с масштабным коэффициентом 604800000 (поскольку основное числовое значение задаётся в миллисекундах). Значение step по умолчанию — 1, что соответствует 1 неделе. Базовое значение шага по умолчанию — -259200000, что соответствует началу первой недели 1970 года ("1970-W01").

На данный момент неясно, что означает значение "any" для step при использовании с элементами ввода week. Будет обновлено, как только эта информация будет определена.

Элементы ввода недели на первый взгляд удобны, так как они предоставляют простой интерфейс для выбора недель и нормализуют формат данных, отправляемых на сервер, независимо от браузера или региональных настроек пользователя. Однако при использовании элементов ввода недели есть проблемы с <input type="week">, так как поддержка браузерами не гарантируется во всех браузерах.

Мы рассмотрим основные и более сложные случаи использования <input type="week">, а затем дадим рекомендации по смягчению проблем с поддержкой браузеров позже (см. Обработка поддержки браузеров).

Самый простой способ использования <input type="week"> включает в себя комбинацию базового элемента <input> и элемента <label>, как показано ниже:

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

Элементы ввода недели не поддерживают атрибуты изменения размера формы, такие как size. Для изменения размера вам придётся использовать CSS.

Вы должны иметь возможность использовать атрибут step для изменения количества пропущенных недель при их увеличении или уменьшении, но, по-видимому, это не влияет на поддерживающие браузеры.

По умолчанию <input type="week"> не применяет никакой проверки к введённым значениям. Реализации пользовательского интерфейса обычно не позволяют вводить значения, которые не являются корректными неделями/годами, что полезно, но всё ещё можно отправить пустое поле, и вы можете захотеть ограничить диапазон выбираемых недель.

Вы можете использовать атрибуты min и max для ограничения допустимых недель, которые может выбрать пользователь. В следующем примере мы устанавливаем минимальное значение Week 01, 2017 и максимальное значение 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>

Вот CSS, используемый в вышеприведённом примере. Здесь мы используем свойства CSS :valid и :invalid для форматирования ввода в зависимости от того, является ли текущее значение допустимым. Нам пришлось разместить значки в элементе <span> рядом с полем ввода, а не в нём самом, потому что в Chrome создаваемое содержимое помещается внутрь элемента управления формой и не может быть эффективно отформатировано или показано.

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;
}

В результате здесь будут считаться допустимыми и выбираемыми только недели между W01 и W52 2017 года в поддерживающих браузерах.

Кроме того, вы можете использовать атрибут 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>

Если вы попытаетесь отправить форму без значения, браузер отобразит ошибку. Попробуйте поиграть с примером сейчас:

Вот снимок экрана для тех, кто не использует поддерживающий браузер:

Как упоминалось выше, основная проблема с использованием ввода недели в настоящее время связана с поддержкой браузерами: Safari и Firefox не поддерживают его на настольных компьютерах, а старые версии IE тоже не поддерживают.

Мобильные платформы, такие как Android и iOS, отлично используют такие типы ввода, предоставляя специализированные элементы управления пользовательского интерфейса, которые делают очень лёгким выбор значений в среде сенсорного экрана. Например, элемент выбора week в Chrome для Android выглядит так:

Браузеры, которые не поддерживают этот тип, плавно переходят к текстовому полю ввода, но это создаёт проблемы как в плане согласованности пользовательского интерфейса (представленный элемент управления будет другим), так и обработки данных.

Вторая проблема ещё более серьёзная. Как отмечалось ранее, для поля ввода week фактическое значение всегда нормализуется до формата yyyy-Www. Когда браузер переходит к обычному текстовому полю ввода, ничего не направляет пользователя к правильному форматированию ввода (и это определённо не интуитивно). Существует множество способов, которыми люди могут ввести значения недель; например:

• Week 1 2017
• Jan 2-8 2017
• 2017-W01
• и т.д.

В настоящее время наилучший способ работы с неделями/годами в формах в кроссбраузерном режиме — попросить пользователя ввести номер недели и год в отдельных элементах управления (<select> элементы пользуются популярностью; см. пример ниже) или использовать JavaScript-библиотеки, такие как jQuery date picker.

В этом примере мы создаём два набора элементов пользовательского интерфейса для выбора недель: собственный элемент выбора, созданный с помощью <input type="week">, и набор из двух элементов <select> для выбора недель/годов в старых браузерах, не поддерживающих тип ввода week.

HTML выглядит следующим образом:

<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>

Значения недель динамически генерируются кодом JavaScript ниже.

Другая интересная часть кода — это код обнаружения функций. Чтобы определить, поддерживает ли браузер <input type="week">, мы создаём новый элемент <input>, пытаемся установить его type в week, а затем сразу же проверяем, чему установлено его type. Браузеры, которые не поддерживают этот тип, вернут text, потому что тип week возвращается к типу text. Если <input type="week"> не поддерживается, мы скрываем собственный элемент выбора и вместо него показываем UI элементов обратной совместимости (<select>).

// Get UI elements
const nativePicker = document.querySelector(".nativeWeekPicker");
const fallbackPicker = document.querySelector(".fallbackWeekPicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const yearSelect = document.querySelector("#year");
const 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
const test = document.createElement("input");

try {
  test.type = "week";
} catch (e) {
  console.log(e.description);
}

// 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 (let i = 1; i <= 52; i++) {
    const option = document.createElement("option");
    option.textContent = i < 10 ? `0${i}` : i;
    weekSelect.appendChild(option);
  }
}

• Элемент <input> общего назначения и интерфейс, используемый для его управления, HTMLInputElement
• Форматы дат и времени, используемые в HTML
• <input type="datetime-local">, <input type="date">, <input type="time"> и <input type="month">
• Совместимость свойств CSS