How to use TimeInput widget in Django forms?

Question

TimeInput is not working for the form given below. But SelectDateWidget() works fine. No error is created for current TimeInput() widget.

Suggest the correct way to use TimeInput widget.

forms.py

class TournmentDetails(forms.ModelForm):

    class Meta():
        model = Tournament
        fields = ('eventname','venue','date','time')

        widgets = {
            'date': forms.SelectDateWidget(
                 empty_label=("Choose Year", "Choose Month", "Choose Day"),
            ),
            'time': forms.TimeInput(format='%H:%M'),
        }

models.py

class Tournament(models.Model):
    eventname = models.CharField(max_length=30, default="None", choices = EVENT_CHOICES)
    venue = models.CharField(max_length=30)
    date = models.DateField(max_length=30)
    time = models.TimeField(max_length=30)

What do you mean by "is not working"? Whats the current and expected behaviour? — gdef_, Mar 28 '19 at 18:26

score 9 · Accepted Answer · answered Mar 30 '20 at 12:15

By default the TimeInput widget renders as an html input field of type text:

<input type="text" name="time" id="id_time">

If, instead, you want to render it as an html input field of type time:

<input type="time" name="time" id="id_time">

then in the meta widgets section of your ModelForm class add a type attribute like this:

'time': forms.TimeInput(attrs={'type': 'time'})

score 0 · Answer 2 · answered Aug 26 '19 at 00:35

0

I had the same problem with TimeInput().
I ended up following Vitor Freitas' tutorial and using Django Tempus Dominus, which includes a Time Picker option.

Hope this helps!

answered Aug 26 '19 at 00:35

beasclo

371
2
6

It is considered best practice to write out the answer here in case the link changes or goes dead. – Aug 26 '19 at 00:58

How to use TimeInput widget in Django forms?

2 Answers2