Django Boostrap TimePicker/Forms не работает

Я работаю над проектом и столкнулся с проблемой с моими формами. В частности, я хочу, чтобы форма использовала элементы Bootstrap4 (из CDN), но когда я пытаюсь использовать функцию виджетов ModelForm, она работает не совсем правильно

forms.py:

    class Meta(object):
        model = ScheduleItem

        fields = (
            'name',
            'time_start',
            'time_end',
            'day',
        )

        widgets = {
            'name': forms.TextInput(
                attrs={
                    'class': 'form-control',
                    'placeholder': 'test'
                }
            ),
            'time_start': forms.TimeInput(
                attrs={
                    'class': "form-control"
                }
            )
        }

    def __init__(self, *args, **kwargs):
        super(ScheduleItemForm, self).__init__(*args, **kwargs)
        self.fields['name'].label = ""
        self.fields['time_start'].label = ""
        self.fields['time_end'].label = ""
        self.fields['day'].label = ""

html страница: (Первые две - использующие форму, последние - не использующие ее)

    <form action="" method="POST">
        {% csrf_token %}
        <div class="input-group mb-3">

            <label class="input-group-text" for="inputGroupSelect01">Description</label>
            {{schedule_item_form.name|as_crispy_field}}
            
        </div>

        <div class="input-group mb-3">

            <label class="input-group-text" for="inputGroupSelect01">Start Time</label>
            {{schedule_item_form.time_start|as_crispy_field}}
            {% comment %} <input type="time" class="form-control" aria-label="Username" name="start_time" required> {% endcomment %}

        </div>

        <div class="input-group mb-3">

            <label class="input-group-text" for="inputGroupSelect01">End Time</label>
            <input type="time" class="form-control" aria-label="Username" name="end_time" required>

        </div>

        <div class="input-group mb-3">

                <label class="input-group-text" for="inputGroupSelect01">Day of the Week</label>
                <select class="form-select" id="inputGroupSelect01">
                    <option selected>Choose...</option>
                    <option value="0">Monday</option>
                    <option value="1">Tuesday</option>
                    <option value="2">Wednesday</option>
                    <option value="3">Thursday</option>
                    <option value="4">Friday</option>
                    <option value="5">Saturday</option>
                    <option value="6">Sunday</option>
                </select>

        </div>

        <button type="submit" class="btn btn-primary mb-2 mt-2">Add item to schedule</button>

    </form>

Вывод: HTML выход

Желательно, чтобы все входы выглядели так же, как два нижних. Почему моя форма выглядит так странно? Спасибо!

Вернуться на верх