<input type="week"> значение атрибута

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

Попробуйте

<label for="camp-week">Choose a week in May or June:</label>

<input
  type="week"
  name="week"
  id="camp-week"
  min="2018-W18"
  max="2018-W26"
  required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Пользовательский интерфейс элемента управления различается в разных браузерах; в настоящее время кроссбраузерная поддержка несколько ограничена: поддерживаются только 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.

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

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

Дополнительные атрибуты

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

max

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

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

min

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

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

readonly

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

step

Атрибут step — это число, задающее шаг изменения значения, которому оно должно соответствовать, или специальное значение any, описанное ниже. Допустимы только значения, отстоящие от базового значения шага на целое число шагов. Базовым значением шага является min, если он задан, в противном случае — value, а если не задано ни одно из них — −259,200,000 (начало недели 1970-W01).

Для полей ввода week значение step задаётся в неделях и трактуется как число миллисекунд, равное значению step, умноженному на 604 800 000 (внутреннее числовое значение выражено в миллисекундах). Значение по умолчанию — 1, то есть 1 неделя.

Строковое значение any означает, что шаг не задан и допустимо любое значение (с учётом других ограничений, таких как min и max). На практике оно действует так же, как 1 для полей ввода 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>

Управление размером поля ввода

<input type="week"> не поддерживает атрибуты задания размера формы, такие как size. Для изменения размера придётся использовать CSS.

Использование атрибута step

Атрибут 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"> отсутствует, мы скрываем встроенное средство выбора и вместо него отображаем резервный интерфейс выбора (элементы <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">