<input type="month">

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

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

Для тех из вас, кто использует браузер, который не поддерживает month, снимок экрана ниже показывает, как это выглядит в Chrome и Opera. Щёлкнув стрелку вниз справа, вы откроете календарь, позволяющий выбрать месяц и год.

Элемент управления Microsoft Edge month выглядит следующим образом:

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

Вы можете установить значение по умолчанию для элемента управления вводом, включив месяц и год в атрибут 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, используя свойство 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 — это id элемента <datalist>, расположенного в том же документе. <datalist> предоставляет список предопределённых значений, которые предлагаются пользователю для этого поля ввода. Любые значения в списке, которые несовместимы с type, не включаются в предлагаемые варианты. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбирать из этого предопределённого списка или вводить другое значение.

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

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

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

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

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

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

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

Для month полей ввода значение step дано в месяцах, с масштабным множителем 1 (поскольку базовое числовое значение также в месяцах). Значение по умолчанию step — 1 месяц.

Элементы ввода, связанные с датами (включая 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 date picker.

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

Форма, запрашивающая месяц и год, выглядит так:

<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> с ID nativeDatePicker использует тип ввода month для запроса месяца и года, в то время как элемент <div> с ID fallbackDatePicker вместо этого использует пару элементов <select>. Первый запрашивает месяц, а второй — год.

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

Следующий код 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">
• Совместимость свойств CSS