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

Элементы <input> типа month создают поля ввода, в которых пользователь может указать месяц и год. Это позволяет легко ввести месяц и год. Значение представляет собой строку в формате YYYY-MM, где YYYY — год из четырёх цифр, а MM — номер месяца.

Попробуйте

<label for="start">Start month:</label>

<input type="month" id="start" name="start" min="2018-03" value="2018-05" />

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

input,
label {
  margin: 0.4rem 0;
}

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

Если ваш браузер не поддерживает month, на снимке экрана ниже показано, как этот элемент выглядит в Chrome и Opera. Нажатие на стрелку вниз справа открывает средство выбора даты, в котором можно выбрать месяц и год.

Элемент управления month в Microsoft Edge выглядит так:

Значение

Строка, представляющая введённые месяц и год, в формате YYYY-MM (год из четырёх или более цифр, затем дефис (-) и месяц из двух цифр). Формат строки месяца, используемый этим типом поля ввода, описан в разделе Строки месяца.

Задание значения по умолчанию

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

<label for="bday-month">What month were you born in?</label>
<input id="bday-month" type="month" name="bday-month" value="2001-06" />

Обратите внимание, что отображаемый формат даты отличается от фактического value; большинство пользовательских агентов отображают месяц и год в формате, соответствующем региональным настройкам операционной системы пользователя, тогда как дата value всегда форматируется как yyyy-MM.

Например, при отправке указанного выше значения на сервер оно будет выглядеть так: bday-month=1978-06.

Задание значения с помощью JavaScript

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

<label for="bday-month">What month were you born in?</label>
<input id="bday-month" type="month" name="bday-month" />

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = "2001-06";

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

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

list

Значение атрибута list — это id элемента <datalist>, находящегося в том же документе. Элемент <datalist> предоставляет список предварительно заданных значений, предлагаемых пользователю для этого поля ввода. Значения из списка, несовместимые с type, не включаются в предлагаемые варианты. Указанные значения являются предложениями, а не обязательными вариантами: пользователи могут выбрать значение из этого списка или ввести другое.

max

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

Это значение должно задавать пару «год-месяц», которая не предшествует паре, указанной атрибутом min.

min

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

Это значение должно задавать пару «год-месяц», которая не следует за парой, указанной атрибутом max.

readonly

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

step

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

Для полей ввода month значение step задаётся в месяцах. Значение step по умолчанию равно 1, то есть шаг составляет один месяц.

Строковое значение any означает, что шаг не задан и допустимо любое значение (с учётом других ограничений, например min и max). На практике оно действует так же, как 1 для полей ввода month, поскольку интерфейс средства выбора позволяет выбирать только целые месяцы.

Использование полей ввода месяца

На первый взгляд поля ввода, связанные с датой (включая month), кажутся удобными: они обещают простой интерфейс для выбора дат и нормализуют формат данных, отправляемых на сервер, независимо от региональных настроек пользователя. Однако у <input type="month"> есть проблемы, поскольку в настоящее время многие основные браузеры ещё не поддерживают этот элемент.

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

Основные способы использования месяца

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

<form>
  <label for="bday-month">What month were you born in?</label>
  <input id="bday-month" type="month" name="bday-month" />
</form>

Задание максимальной и минимальной даты

С помощью атрибутов min и max можно ограничить диапазон дат, доступных для выбора пользователю. В следующем примере мы задаём минимальный месяц 1900-01 и максимальный месяц 2013-12:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
</form>

В результате:

• Можно выбрать только месяцы с января 1900 года по декабрь 2013 года; до месяцев за пределами этого диапазона нельзя прокрутить элемент управления.
• В зависимости от используемого браузера месяцы за пределами заданного диапазона могут быть недоступны в средстве выбора месяца (например, в Edge) или считаться недопустимыми (см. раздел Проверка), но при этом оставаться доступными (например, в Chrome).

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

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

Проверка

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

Чтобы этого избежать, можно использовать атрибуты min и max для ограничения доступных дат (см. раздел Задание максимальной и минимальной даты), а также атрибут required, чтобы сделать заполнение даты обязательным. В результате поддерживающие браузеры покажут ошибку при попытке отправить дату вне заданных границ или пустое поле даты.

Рассмотрим пример: здесь мы задали минимальную и максимальную даты, а также сделали поле обязательным:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    </label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</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;
}

Обработка поддержки браузерами

Как уже упоминалось выше, основная проблема использования полей ввода даты на момент написания статьи заключается в том, что многие основные браузеры ещё не реализовали их поддержку; на настольных компьютерах их поддерживают только Chrome/Opera и Edge, а также большинство современных мобильных браузеров. Например, средство выбора month в Chrome для Android выглядит так:

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

Вторая проблема серьёзнее первой. Как упоминалось ранее, в поле ввода month фактическое значение всегда нормализуется до формата yyyy-mm. В то же время обычное поле ввода text не знает, в каком формате должна быть указана дата. Это проблема, поскольку люди записывают даты множеством разных способов. Например:

• mmyyyy (072022)
• mm/yyyy (07/2022)
• mm-yyyy (07-2022)
• yyyy-mm (2022-07)
• Month yyyy (июль 2022 года)
• и так далее…

Один из способов решить эту проблему — добавить атрибут pattern к полю ввода month. Хотя поле ввода month его не использует, при переходе браузера к режиму обычного поля ввода text будет применён шаблон. Например, попробуйте открыть следующую демонстрацию в браузере, который не поддерживает поля ввода month:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    </label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Если попробовать отправить форму, браузер покажет сообщение об ошибке (и выделит поле ввода как недопустимое), если введённое значение не соответствует шаблону nnnn-nn, где n — число от 0 до 9. Конечно, это не мешает пользователям вводить недопустимые даты (например, 0000-42) или неправильно отформатированные даты, соответствующие шаблону.

Есть и другая проблема: пользователь не обязательно будет знать, какой из множества форматов даты ожидается. Над этим ещё предстоит поработать.

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

Примеры

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

HTML

Форма для ввода месяца и года выглядит так:

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?</label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">What month would you like to visit us?</p>
  <div class="fallbackDatePicker">
    <div>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year"></select>
      </span>
    </div>
  </div>
</form>

Элемент <div> с идентификатором nativeDatePicker использует тип поля ввода month для запроса месяца и года, а элемент <div> с идентификатором fallbackDatePicker использует вместо этого пару элементов <select>. Первый запрашивает месяц, а второй — год.

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

JavaScript

Ниже приведён код JavaScript, который выбирает нужный подход и формирует список годов для нестандартного элемента <select>.

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

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

const yearSelect = document.querySelector("#year");
const monthSelect = document.querySelector("#month");

// 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 = "month";
} 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 years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // Get the current year as a number
  const date = new Date();
  const year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for (let i = 0; i <= 100; i++) {
    const option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Универсальный элемент <input> и интерфейс для работы с ним: HTMLInputElement
• Форматы даты и времени, используемые в HTML
• Руководство по средствам выбора даты и времени
• <input type="datetime-local">, <input type="date">, <input type="time"> и <input type="week">