Django Bootstrap Datetimepicker显示在错误的位置

时间:2019-03-18 10:58:08

标签: django twitter-bootstrap django-forms django-templates

我尝试使用Django小部件将Datetimepicker添加到模板中的表单。 在forms.py

Event_time = forms.DateTimeField(widget = forms.TextInput(attrs={                                                                    
                                                                'id':'datetimepicker1'}))

在models.py

class Event(models.Model):
Description = models.CharField(max_length=200)
date_added = models.DateTimeField(auto_now_add=True)
Event_name = models.CharField(max_length=48)
Event_time = models.DateTimeField()
Event_venue = models.CharField(max_length=100)
Max_players = models.IntegerField()
Players_registratered = models.IntegerField()
owner = models.ForeignKey(User, on_delete=models.CASCADE)

在模板中,我将html写为

<div class="container-fluid container-transparent container-small">
  <form action="{% url 'team_sports_app:new_event' %}" method='post'>
    {% csrf_token %}
    {% bootstrap_form form %}
    <div class="text-center">
     {% buttons%}
       <button name="submit" class="btn btn-primary">Add event</button>
     {%endbuttons%}
   </div>
  </form>
</div>
<script type="text/javascript">
 $('#datetimepicker1').datetimepicker({
   format: 'YYYY-MM-DD HH:mm',
 });
 </script>

并且选择器的位置始终位于页面底部: enter image description here

位于TextInput上方或下方。

希望有人可以提供帮助!非常感谢你!

0 个答案:

没有答案