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

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

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

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

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

class MyDateInput(forms.DateInput):
    input_type = 'date'
    format = '%Y-%m-%d'

class MyDateInput(forms.DateInput):

input_type = 'date'

format = '%Y-%m-%d'

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

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

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

birthday = forms.DateField(label='Дата рождения', required=True,
                           widget=MyDateInput({
                               'class': 'form-control'
                           }))

birthday = forms.DateField(label='Дата рождения', required=True,

widget=MyDateInput({

'class': 'form-control'

}))

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

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

<input type="date" name="birthday" value="2021-04-02" class="form-control" required="" id="id_birthday">

1	<input type="date" name="birthday" value="2021-04-02" class="form-control" required="" id="id_birthday">

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

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

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

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

USE_L10N = False

1	USE_L10N = False

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

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

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