Djago time widget not showing up

Question

All I want to do is add time widget to my form so I can easily pick the time. Everything is very simple, the page is loading but the widgets don't show up. No error nothing. I am thinking maybe I didn't set up the form widgets correctly but not sure what I did wrong. Here is my Forms.py-

from django.contrib.admin import widgets
from django.contrib.admin.widgets import AdminDateWidget, AdminTimeWidget, AdminSplitDateTime

class WorkOutForm(ModelForm):
    class Meta:
        model = WorkOut
        fields = '__all__'   
        widgets={
            'start':AdminTimeWidget(),
            'end':AdminTimeWidget(),

        }

Here is the Models.py. You will notice "start" and "end" fields are timefield-

class WorkOut(models.Model):
    date=models.DateField(auto_now_add=True, auto_now=False, blank=True)
    day=models.DateField(auto_now_add=True, auto_now=False, blank=True)
    start=models.TimeField(null=True)
    name=models.CharField(max_length=100, choices=move)
    weight=models.CharField(max_length=100, blank=True)
    rep=models.CharField(max_length=100, blank=True)
    pedal= models.CharField(max_length=100, blank=True)  
    stretchtype =models.CharField(max_length=100, blank=True)
    end=models.TimeField(null=True)
    note=models.TextField(max_length=300, blank=True)  

    def __str__(self):
        return self.name

And here are the views linked to it even though I don't think it has much relevance-

def workout(request):
    form=WorkOutForm()
    if request.method=="POST":
        form=WorkOutForm(request.POST)
        if form.is_valid():
            form.save()

    context={'form':form}   

    return render(request, 'myapp/enter_workout.html', context)  


 

def update_workout(request, pk):
    order=WorkOut.objects.get(id=pk)
    form=WorkOutForm(instance=order)
    if request.method=='POST':
        form=WorkOutForm(request.POST, instance=order)
        if form.is_valid():
            form.save()
            
            
    context={'form':form}

    return render(request, 'myapp/enter_workout.html', context)

And the form on HTML page is also very basic,so don't think there is any issue there either-

<form action="" method="POST">
            {% csrf_token %}
           
            {{form}}
        
        <input type="submit" value="Submit">
    
        </form>

What have I done wrong here? How can I make those widgets to show up?

Answer 1

You can try to fill the default values with the current time.

from datetime import datetime


class WorkOut(models.Model):
    move = (("1", "Tom"), ("2", "Sara"), ("3", "Emilia"),)
    date = models.DateField(auto_now_add=True, auto_now=False, blank=True)
    day = models.DateField(auto_now_add=True, auto_now=False, blank=True)
    start = models.TimeField(default=datetime.now, null=True)
    name = models.CharField(max_length=100, choices=move)
    weight = models.CharField(max_length=100, blank=True)
    rep = models.CharField(max_length=100, blank=True)
    pedal = models.CharField(max_length=100, blank=True)
    stretchtype = models.CharField(max_length=100, blank=True)
    end = models.TimeField(default=datetime.now,null=True)
    note = models.TextField(max_length=300, blank=True)

    def __str__(self):
        return self.name  

Update 22.10.2022 Made fields with time selection on bootstrap. For this you need to install:

pip install django-bootstrap4
pip install django-bootstrap-datepicker-plus

In the WorkOutForm class in init set the styles for all fields.

forms.py

from bootstrap_datepicker_plus.widgets import TimePickerInput

class WorkOutForm(ModelForm):
    class Meta:
        model = WorkOut
        fields = "__all__"
        widgets = {
            "start": TimePickerInput(),
            "end": TimePickerInput(),

        }
    def __init__(self, *args, **kwargs):
        super(WorkOutForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                "class": "form-control"
            })

templates

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}

<form action="" method="POST" style="width: 20%">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit">
</form>