如何在Django应用程序中使用引导日期选择器？

Question

我想在django应用程序中使用引导日期选择器（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，因为它是引导datetimepicker所必需的（请参见this stackoverflow post）。顺序很重要，请看上面提到的帖子。

然后使用this site获取所需的datetimepicker类型。如果没有要在其中嵌入datetimepicker的模型表单，只需将其复制到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>

我希望我能帮你省点时间：）

Answer 2

我也经历过类似的问题。您需要在任何自定义jquery文件之前调用jquery min文件。所以你的代码应该是这样的。

<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/css/datepicker.css' %}">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="{% static 'my_app/js/bootstrap-datepicker.js' %}">


<script>
$(document).ready(function(){
    $('.datepicker').datepicker();
});
</script>

我知道这几个月没人回复了，但我想把这个贴出来，以确保这对其他人有帮助。

Answer 3

虽然有一个python包似乎很好地解决了这个问题，但我选择看看是否可以使用Django的widget类来呈现datepicker属性，如docs所述。

注意，我只使用日期字段，不使用日期时间字段，因为在这种情况下，我不需要我的应用程序支持时间。

型号.py

class MyModel(models.Model):
    ...
    date = models.DateField()
    ...

表单.py

class MyForm(forms.Form):
    ...

    '''
    Here I create a dict of the HTML attributes
    I want to pass to the template.
    '''
    DATEPICKER = {
        'type': 'text',
        'class': 'form-control',
        'id': 'datetimepicker4'
    }
    # Call attrs with form widget
    date = forms.DateField(widget=forms.DateInput(attrs=DATEPICKER))
    ...

模板.html

<div class="form-group">
  <div class='input-group date' id='datetimepicker1'>
    {{ form.date }}
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

JS

$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD' //This is the default date format Django will accept, it also disables the time in the datepicker.
    })
});