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

Question

我想在我的 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()

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

Answer 1

更新:警告，此建议使用 dateTIMEpicker 而不是 datepicker。我建议这样做是因为您不必使用 datetimepicker 的时间功能，所以它对我来说非常方便。

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

因此，首先，请确保还包括 moment.js ，因为它是 bootstrap-datetimepicker 所必需的(参见 this stackoverflow post )。顺序很重要，请参阅提到的帖子。

然后使用this site获取所需的日期时间选择器类型。如果您没有要在其中嵌入日期时间选择器的模型表单，只需将其复制到您的 html 代码中就可以了。

如果你想像我一样让你的模型表单字段之一成为一个奇特的日期选择器(没有时间)字段，那么请执行以下操作:

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>

表单.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>

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