Как я могу интегрировать jquery timepicker в мой проект django

Вот код jquery timepicker:

$('.timepicker').timepicker({
    timeFormat: 'h:mm p',
    interval: 60,
    minTime: '10',
    maxTime: '6:00pm',
    defaultTime: '11',
    startTime: '10:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

Вот мой forms.py

from django import forms
from bootstrap_datepicker_plus import TimePickerInput
from .models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content','chamber','address','fees','days','hours','review']
        widgets = {

            'hours': forms.DateField(widget=forms.DateInput(attrs={'class':'timepicker'}))

        }

Вот мой models.py

class Post(models.Model):
    author = models.ForeignKey(
        settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    title = models.CharField('Doctor\'s Name',max_length=100)
    content = models.CharField('Specialty',max_length=100)
    chamber = models.CharField('Chamber\'s Name',max_length=200)
    address = models.CharField('Address',max_length=100)
    fees = models.IntegerField(default=0)
    days = MultiSelectField(choices= DAYS_OF_WEEK)
    
    hours = models.TimeField()
    
    review = models.TextField()
    liked = models.ManyToManyField(
        settings.AUTH_USER_MODEL, blank=True, related_name='liked')
    date_posted = models.DateTimeField(default=timezone.now)

    objects = PostManager()

    class Meta:
        ordering = ('-date_posted', )

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('post_detail', kwargs={'pk': self.pk})

Я новичок в django и jquery, как я могу добавить timepicker в поле часов?

This is my website UI

Когда я навожу мышь на правую сторону поля часов, она меняет форму. Но при нажатии не происходит никакого события.

Здесь нет таймпикера

Когда я осматриваю, это приходит

Inspect in browser

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