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获取所需的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>

<强> 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>

我希望我能节省你一些时间：）

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＆＃39; widget类来使datepicker工作以呈现datepicker属性，在{{3 }}。

注意，我只使用日期字段而不是日期时间字段，因为我不需要我的应用来支持此时的时间。

<强> models.py

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

<强> forms.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))
    ...

<强> template.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.
    })
});

Answer 4

对于DJango版本2.1,2.0,1.11,1.10和1.8

要在Django应用安装django-bootstrap-datepicker-plus中使用Bootstrap日期选择器，请按照GitHub页面上的installation instructions进行配置，然后您可以在自定义表单和模型表单中使用它，如下所示。 / p>

自定义表单中的用法：

from bootstrap_datepicker_plus import DatePickerInput

class ToDoForm(forms.Form):
    user = forms.CharField()
    date_from = forms.DateField(widget = DatePickerInput())

模型表单中的用法：

from bootstrap_datepicker_plus import DatePickerInput

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['user', 'date_from', 'date_to']
        widgets = {
            'date_form': DatePickerInput(),
            'date_to': DatePickerInput()
        }

使用django-filters：

from bootstrap_datepicker_plus import DatePickerInput

class Filter(django_filters.FilterSet):
   class Meta:
        model = MyModel
        fields = ['user', 'date_from', 'date_to']
        widgets = {'date': DatePickerInput()}

免责声明： 此django软件包由我维护。有关它的任何问题，请在Github页面上open issues而不是在此处发表评论。

Answer 5

（与 Django 2.1、1.11 和python> 2.7 和> 3.4 兼容）有效且可重用的解决方案，来自bootstrap-datepicker的自定义内容：

{{1}}

然后，我使用实施我的形式BootstrapDatePicker自定义类：

{{1}}

最后，我在模板中包含了js / css。

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

5 个答案: