Виджет TimeInput

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

Синтаксис

pythonfrom django import forms

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

Пример

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

pythonfrom django import forms

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

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

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

Пример

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

pythonfrom django import forms

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

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

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

Пример

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

pythonfrom 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 с начальным значением (текущее время):

pythonfrom 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')
  )

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

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

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