Если вы хотите, чтобы пользователи могли выбирать конкретный месяц в году, какой самый простой, но эффективный пользовательский интерфейс?

Вариант 1: отдельные раскрывающиеся списки «Месяц» и «Год»

Это может быть многословно, но у вас есть полный контроль над их размещением, меткой и форматом.

<select>
    <option>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> Month

<select>
    <option>2021</option>
    <option>2022</option>
    <option>2023</option>
</select> Year

Вариант 2: используйте встроенный в браузер инструмент выбора месяца.

У вас меньше контроля над внешним видом средства выбора, но код намного чище. И поддержка локализации бесплатна.

<input type='month'> Month

Вы можете сделать некоторые настройки. Например, чтобы разрешить пользователям выбирать только концы месяцев кварталов 2020 года.

<input type='month' min='2020-03' max='2020-12' step='3'>

По данным МДН:

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

По состоянию на декабрь 2022 года Firefox и Safari (настольный компьютер) еще не поддерживают эту функцию, в то время как браузеры на базе Chrome (включая новый Edge от Microsoft) и большинство мобильных браузеров (включая Safari на iOS) поддерживают эту функцию.

Если вам понравилась эта статья, пожалуйста, подпишитесь на меня, чтобы получать больше качественного контента. Спасибо.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.