title: How can I integrate jquery timepicker in my django project
body: <p>Here is the jquery timepicker code:</p>
  <pre><code>$('.timepicker').timepicker({
      timeFormat: 'h:mm p',
      interval: 60,
      minTime: '10',
      maxTime: '6:00pm',
      defaultTime: '11',
      startTime: '10:00',
      dynamic: false,
      dropdown: true,
      scrollbar: true
  });
  </code></pre>
  <p>Here is my forms.py</p>
  <pre><code>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'}))
  
          }
  </code></pre>
  <p>Here is my models.py</p>
  <pre><code>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})
  </code></pre>
  <p>I am new to django and jquery how can I add a timepicker in my hours field?</p>
  <p><a href="https://i.stack.imgur.com/6WwMT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6WwMT.png" alt="This is my website UI" /></a></p>
  <p>Where I put my mouse on right side of hours field it changes shape. But no event is triggered when pressed.</p>
  <p>Here no timepicker comes</p>
  <p>When I inspect this comes</p>
  <p><a href="https://i.stack.imgur.com/ALaCy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ALaCy.png" alt="Inspect in browser" /></a></p>