Виджет TimeInput

Виджет TimeInput применяется для отображения поля ввода времени в HTML-формах. Он генерирует тег input с типом time, который позволяет пользователю выбирать время через встроенный браузерный интерфейс или вводить его вручную. Виджет принимает параметры форматирования времени и атрибуты HTML-элемента.

Синтаксис

from django import forms

class MyForm(forms.Form):
	time_field = forms.TimeField(widget=forms.TimeInput(attrs={...}))

Пример

Создадим форму с полем для ввода времени встречи:

from django import forms

class MeetingForm(forms.Form):
	meeting_time = forms.TimeField(
		widget=forms.TimeInput(attrs={
			'class': 'form-control',
			'placeholder': 'HH:MM'
		})
	)

Результат рендеринга виджета в HTML-шаблоне:

<input type="time" name="meeting_time" class="form-control" placeholder="HH:MM">

Пример

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

from django import forms

class EventForm(forms.Form):
	start_time = forms.TimeField(
		widget=forms.TimeInput(format='%H:%M')
	)

При рендеринге виджета значение будет отображаться в формате "часы:минуты":

<input type="time" name="start_time" value="14:30">

Пример

Обработка данных из поля TimeInput в представлении:

from django.shortcuts import render
from django.http import HttpResponse
from .forms import MeetingForm
from datetime import time

def meeting_view(request):
	if request.method == 'POST':
		form = MeetingForm(request.POST)
		if form.is_valid():
			meeting_time = form.cleaned_data['meeting_time']
			# meeting_time - объект datetime.time
			return HttpResponse(f"Meeting at: {meeting_time}")
	else:
		form = MeetingForm()
	return render(request, 'meeting.html', {'form': form})

Пример

Используем TimeInput с начальным значением (текущее время):

from django import forms
from datetime import datetime

class ScheduleForm(forms.Form):
	alarm_time = forms.TimeField(
		widget=forms.TimeInput(attrs={
			'step': '300',  # Шаг в секундах (5 минут)
			'min': '06:00',
			'max': '23:00'
		}),
		initial=datetime.now().strftime('%H:%M')
	)

Результат рендеринга с ограничениями:

<input type="time" name="alarm_time" step="300" min="06:00" max="23:00" value="15:30">

Смотрите также

виджет TextInput,
который создаёт простое текстовое поле ввода
виджет DateInput,
который используется для ввода даты
виджет DateTimeInput,
который совмещает ввод даты и времени
поле TimeField,
которое используется вместе с виджетом TimeInput