jquery – 如何在Django应用程序中使用bootstrap-datepicker？

我想在我的django应用程序中使用bootstrap-datepicker( https://bootstrap-datepicker.readthedocs.org).我使用Django 1.7.

在index.html文件中我有：

<link rel="stylesheet" href="{% static 'my_app/css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'my_app/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'my_app/js/bootstrap-datepicker.js' %}">
<link rel="stylesheet" href="{% static 'my_app/css/datepicker.css' %}">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function(){
        $('.datepicker').datepicker();
    });
</script>

在我的forms.py中,我有：

class Filter(django_filters.FilterSet):

    class Meta:
        model = MyModel
        fields = ['user','date_from','date_to']
        widgets = {'date': forms.DateInput(attrs={'class':'datepicker'})}

我的model.py用于设置日期：

date_from = models.DateField()
date_to = models.DateField()

当我浏览带有日期的页面时 – 在输入区域中不起作用.

解决方法

更新：警告,此建议使用dateTIMEpicker而不是datepicker.我建议这样做是因为你不必使用datetimepicker的时间功能,所以在我的情况下它非常方便.

由于我一直试图让datetimepicker工作(与模型表单结合)很长一段时间,我想我会发布解决方案,感觉就像是关于这个主题的所有stackoverflow帖子的积累;)

所以,首先,确保还包括moment.js,因为bootstrap-datetimepicker需要它(见this stackoverflow post).订单很重要,请参阅上述帖子.

然后使用this site获取所需的datetimepicker类型.如果您没有要在其中嵌入datetimepicker的模型表单,那么只需将其复制到您的HTML代码中即可.

如果你想让你的一个模型表单字段像我一样做一个花哨的datepicker(没有时间)字段,那么执行以下操作：

base.html文件

<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/moment-2.4.0.js"></script>
<script type="text/javascript" src="scripts/bootstrap-datetimepicker.js"></script>

forms.py

class MyForm(forms.ModelForm):
    class Meta:
    ...
    widgets = {'myDateField': forms.DateInput(attrs={'id': 'datetimepicker12'})}
    ...

myForm.html：

<div class="row">
    ...
    {% bootstrap_form form %}
    ...
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker12').datetimepicker({
            inline: true,sideBySide: true,format: 'DD.MM.YYYY' /*remove this line if you want to use time as well */
        });
    });
</script>

我希望我能节省你一些时间:)