Ввод даты в формах в Django в два клика и её отображение

К сожалению, среди стандартных элементов управления для форм в Django нет ни одного, что позволил бы ввести значение даты в варианте однозначно дружественном для пользователя.

DateField в чистом виде (с виджетом DateInput) только обеспечивает форматированный ввод-вывод даты в текстовом варианте (неудобно), а SelectDateWidget позволяет вводить элементы даты только по частям (три поля – для дня, для месяца и для года, что тоже не всегда удобно).

Поэтому для решения данной задачи приходится либо использовать сторонние библиотеки или создавать свой виджет. В этой статье мы создадим простейший виджет для ввода и отображения даты.

За основу мы возьмём стандартный DateInput. Создадим свой класс виджета, который будет наследоваться от него и зададим в нём собственные значения полей input_type и format как показано ниже.

Поле input_type отвечает за атрибут type тега input который будет соответствовать данному виджету, В данном случае это будет стандартный HTML 5 input для выбора даты.

Поле format отвечает за формат, в котором будет выводиться значение для input. В нашем случае формат задан таким образом чтобы обеспечить корректное отображение значения даты в указанном input, так как последний корректно обрабатывает только значения дат в виде «гггг-мм-дд» (например: «2021-05-07»).

Пример использования указанного виджета:

Как это выглядит в браузере:

Свой виджет для даты

Свой виджет для даты развёрнут

Вёрстка, которая генерируется для данного виджета:

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

  1. Открыть «календарь»;
  2. Собственно, выбрать дату.

В то же время такой виджет предельно прост и не требует сторонних библиотек.

Однако простота здесь имеет и обратную сторону. Для корректной работы виджета в конфигурации приложения Django (файл config.py) необходимо отключить использование L10n, как показано ниже.

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

Для «ru-RU» это «дд.мм.гггг» (применительно к нашему примеру это будет «07.05.2021») и стандартный input с типом date не сможет отобразить дату в браузере в таком виде.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *