Календарь выбора даты в мобильном приложении: сетка, числа и состояния

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

Пользователю может понадобиться выбрать ближайшую свободную запись, дату доставки, начало отпуска или день в прошлом для фильтра отчёта. Это похожие поля, но разные сценарии: в одном важна доступность слотов, в другом — быстрый переход на годы назад, в третьем — диапазон из двух дат. Один календарный экран не обязан одинаково хорошо решать все эти задачи.

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

Нативный системный элемент часто уже решает ввод даты и локализацию. Apple описывает компактный, встроенный в экран и колесный стили Date Picker; Android `DatePicker` поддерживает календарный и вращающийся варианты. Пользовательский календарь оправдан, когда поверх выбора нужно показать содержимое дней: свободные интервалы, цены, события или ограничения. Иначе кастомная сетка увеличивает объём проверок без пользы.

Строка дней недели должна следовать календарю устройства или явно выбранным настройкам приложения. Не задавайте понедельник первым для всех рынков: ожидание может различаться по локали, а начало недели влияет на положение каждого числа. В настройках Android у календаря предусмотрен параметр первого дня недели; системные компоненты Apple ориентируются на календарь и локаль пользователя. Для собственного виджета эти значения нужно получить из локализованных данных, а не пришить к макету.

Сокращённые подписи «Пн», «Вт», «Ср» экономят место, но сами по себе не объясняют, как экран читает скринридер. Используйте полные доступные названия дней для озвучивания и не полагайтесь на букву «С»: в русском языке воскресенье и среда начинаются одинаково. В визуальной строке подписи выравнивайте по центру ячеек чисел; оставляйте одинаковую ширину колонок, даже если подписи имеют разную длину.

Заголовок месяца должен быть узнаваемым и локализованным: «сентябрь 2026», а не фиксированное английское «Sep 2026». Кнопки предыдущего и следующего месяца должны иметь доступные имена, а видимый заголовок — обновляться при перелистывании. Если переходы ограничены, покажите границу поведением и состоянием кнопки, не заставляйте пользователя проверять пустые месяцы наугад.

У календарной сетки семь одинаковых колонок. Число месяца занимает одну ячейку независимо от того, однозначное оно или двузначное; центрирование делает строки устойчивыми и помогает сравнивать столбцы взглядом. Не сжимайте расстояние между ячейками в конце строки и не подгоняйте последнюю неделю отдельным правилом: меняющаяся геометрия усложняет поиск конкретного дня.

Показывать соседние числа из прошлого и следующего месяца необязательно. Если вы их оставляете, визуально отделите от дней текущего месяца и не делайте их доступными к выбору без явной причины. Иначе пользователь может нажать на бледное «1» и не понять, какую дату он выбрал. Альтернатива — сохранять равномерную сетку с пустыми ячейками. Главное — чтобы переход на другой месяц не переставлял колонки и не уводил выбранное число в другое место неожиданно.

Проверьте календарь на месяце, который начинается в выходной, на коротком месяце и на месяце с шестью календарными неделями. Это не редкие «краевые случаи» в геометрии: все такие раскладки возникают в обычном календаре. На узком экране смотрите не только на статический первый месяц, но и на момент смены месяца, когда могут измениться число строк и высота блока.

Числа — основной материал календаря, поэтому они должны различаться в выбранном шрифте и на небольшом размере. Проверьте пары 1/7, 3/8, 5/6 и убедитесь, что форма нуля не напоминает соседнюю цифру. Табличные цифры одинаковой ширины полезны, если сетка строится на текстовых метриках или в соседних колонках показываются цены и слоты. Но фиксируйте ширину ячеек независимо от ширины цифр: шрифт не должен менять геометрию календаря.

Не уменьшайте дату до неразличимой точки ради более свободной сетки. Если на экране тесно, сначала проверьте поля вокруг календаря, длинную подпись месяца, лишние пояснения и одновременное отображение двух месяцев. Затем испытайте увеличенный текст: часть системных компонентов может масштабироваться вместе с настройками устройства, а собственная сетка должна сохранять читаемость и возможность нажать на день. Когда нужна типографика с нужным характером, можно подготовить собственный шрифт через Fontgenerator, а затем отдельно проверить его цифры в реальном размере ячеек.

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

Составьте набор состояний до выбора палитры:

Состояния различаются не декоративно, а по смыслу. Красный цвет может обозначать запрещённый день в одном продукте, а в другом — выходной; не используйте цвет без проверки семантики. Контраст должен сохраняться в светлой и тёмной темах, а выбор — оставаться понятным при сниженной насыщенности экрана. Если применяете форму и цвет вместе, проверьте, что они не конфликтуют с индикатором фокуса и системной подсветкой.

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

Промежуточные дни должны визуально связывать начало и конец, а не выглядеть как набор отдельных выбранных точек. На переносе через строку сделайте фон диапазона непрерывным на уровне ячеек, оставив конечные даты чётко выделенными. Если диапазон не может превышать, например, срок бронирования в продукте, сообщите об ограничении до или во время выбора и объясните, почему следующая дата не подходит. Не скрывайте правило только в недоступном состоянии.

Для записи на услугу представьте клиента, который ищет первую доступную дату. В календаре есть прошедшие дни, полный сегодня, несколько свободных слотов и выбор времени после дня. Тогда текст состояния «Нет мест» полезнее серой цифры: он объясняет, почему дата не выбирается. Отдельно проверьте, сохраняется ли выбранная дата, когда человек возвращается из списка времени.

Для даты рождения человек обычно перематывает далеко назад. Если единственный способ — десятки нажатий по стрелке месяца, календарь формально работает, но не подходит сценарию. Добавьте переход к году или предложите нативный системный ввод, если его формат и правила приемлемы для продукта. После ввода проверьте, что дата записалась в ожидаемом порядке «день, месяц, год» и не сместилась из-за часового пояса.

Для диапазона поездки проверьте пересечение месяца, недоступный вылет и попытку выбрать дату возвращения раньше начала. Человек должен видеть, что произошло, и способ исправить выбор. Состояние выбора нельзя сообщать только цветом: скринридер должен получить название дня, дату полностью и состояние «выбрана» или «недоступна» через семантику элементов интерфейса.

Фиксировать начало недели. Макет совпадает с одной локалью, а для другой переставляет ожидания и подписи. Подтягивайте локаль и календарные правила для выбранной среды; если продукт намеренно использует бизнес-календарь, поясните его.

Скрывать состояние за бледностью. Низкий контраст не объясняет, почему день отключён, и может сделать число нечитаемым. Передайте состояние не только цветом и текстурой, проверьте читаемость, а при важной причине добавьте короткое пояснение.

Показывать события цветными точками без легенды. Точка может значить свободный слот, занятие или напоминание. Обозначьте её смысл текстом или доступным названием дня и проверьте, что пользователь может открыть подробность события.

Смешивать «сегодня» и «выбрано». Если оба состояния имеют одинаковый круг, человек теряет ориентир после выбора другой даты. Дайте им разные визуальные признаки и проверьте отдельно календарь при открытии и после касания.

Не тестировать длинные названия месяца и увеличение шрифта. Русские месяцы различаются по длине; пользовательский шрифт может сделать подпись шире ожидаемой. Проверяйте заголовок на длинных формах («сентябрь», «ноябрь»), используйте устойчивое сокращение только при необходимости и не обрезайте название без способа понять месяц.

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

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

Сохраните оба смысла: выбранность должна оставаться главным состоянием, а «сегодня» — вторичным ориентиром, например контуром внутри выбранной заливки или небольшой подписью. Проверьте контраст и доступное описание.

Только если по правилам сервиса в них действительно нельзя выбрать дату. Выходной не равен недоступности для всех продуктов: календарь записи может работать в выходные, а доставка — иметь другой график.

Передавайте полное название даты и её состояние, а не только цифру или оттенок. Скринридер должен объявлять день недели, число, месяц и год, а интерактивные состояния — «выбрано», «недоступно» или наличие события.

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

Хороший календарь выбора даты держится на ясных правилах и предсказуемой сетке: локализуйте порядок недели, отделяйте выбор от остальных состояний и проверяйте реальные месяцы, а не один красивый кадр. Для платформенных деталей сверяйтесь с официальными рекомендациями Apple по выборщикам, документацией Apple UIDatePicker и справочником Android DatePicker. Затем тестируйте календарь в сценарии, ради которого человек открыл экран.

Для мобильного продукта начните с простого прогона: выберите дату в локали пользователя, увеличьте системный текст и пройдите тот же путь скринридером. Если цифры теряются в ячейках, подготовьте несколько вариантов шрифта в Fontgenerator и сравните их внутри настоящей сетки.