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

Posted 2023-02-24

【中文标题】如何在 Django 应用程序中使用 bootstrap-datepicker？

【英文标题】：How to use the bootstrap-datepicker in Django app?

【发布时间】：2015-03-24 17:57:25

【问题描述】：

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

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

【参考方案1】：

我遇到了类似的问题。您需要在任何自定义 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>

我知道这几个月没有得到答复，但我想发布这个只是为了确保这可能对其他人有所帮助。

【参考方案2】：

虽然有一个 python 包似乎可以很好地解决这个问题，但我选择看看我是否可以使用 Django 的 widget 类来渲染 datepicker 属性，这在 docs 中提到过。

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

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.
    )
);

【参考方案3】：

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

由于我一直试图让 datetimepicker 工作（结合模型表单）已经有一段时间了，我想我会发布解决方案，感觉就像是关于这个主题的所有 *** 帖子的积累；）

因此，首先，确保还包含 moment.js，因为它是 bootstrap-datetimepicker 所要求的（请参阅 this *** post）。顺序很重要，请参阅提到的帖子。

然后使用this site 获取您需要的日期时间选择器类型。如果您没有要嵌入 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>

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

【讨论】：

抱歉，您正在使用另一个 javascript 库来回答，甚至没有说清楚。

这似乎没有回答这个问题。该问题询问的是 datepicker，而不是 datetimepicker，它们似乎是两个独立的（尽管可能相关）小部件。链接的文档没有提到需要时刻或日期时间选择器，那么是否有一些特定于日期选择器的文档表明这一点？

【参考方案4】：

适用于 DJango 版本 2.1、2.0、1.11、1.10 和 1.8

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

在自定义表单中的使用：

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，而不是将 cmets 放在这里。

【参考方案5】：

（Django 2.1, 1.11 和 python >2.7 和 > 3.4 兼容）工作和可重用解决方案，来自bootstrap-datepicker的自定义：

import re
from django.conf import settings
from django.utils.translation import get_language
from django import forms
from django.utils import formats, timezone

class BootstrapDatePicker(forms.DateInput):
    format_re = re.compile(r'(?P<part>%[bBdDjmMnyY])')

    def __init__(self, attrs=None, format=None):
        '''
        for a list of useful attributes see:
        http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

        Most options can be provided via data-attributes. An option can be
        converted to a data-attribute by taking its name, replacing each
        uppercase letter with its lowercase equivalent preceded by a dash, and
        prepending "data-date-" to the result. For example, startDate would be
        data-date-start-date, format would be data-date-format, and
        daysOfWeekDisabled would be data-date-days-of-week-disabled.
        '''
        # final_attrs provides:
        # - data-provide: apply datepicker to inline created inputs
        # - data-date-language: apply the current language
        # - data-date-format: apply the current format for dates
        final_attrs = 
            'data-provide': 'datepicker',
            'data-date-language': get_language(),
            'data-date-format': self.get_date_format(format=format),
            'data-date-autoclose': 'true',
            'data-date-clear-btn': 'true',
            'data-date-today-btn': 'linked',
            'data-date-today-highlight': 'true',
        
        if attrs is not None:
            classes = attrs.get('class', '').split(' ')
            classes.append('datepicker')
            attrs['class'] = ' '.join(classes)
            final_attrs.update(attrs)
        super(BootstrapDatePicker, self).__init__(attrs=final_attrs, format=format)

    def get_date_format(self, format=None):
        format_map = 
            '%d': 'dd',
            '%j': 'd',
            '%m': 'mm',
            '%n': 'm',
            '%y': 'yy',
            '%Y': 'yyyy',
            '%b': 'M',
            '%B': 'MM',
        
        if format is None:
            format = formats.get_format(self.format_key)[0]
        return re.sub(self.format_re, lambda x: format_map[x.group()], format)

    @property
    def media(self):
        root = 'vendor/bootstrap-datepicker'
        css = 'screen': ('vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css',)
        js = ['%s/js/bootstrap-datepicker.min.js' % root]
        js += ['%s/locales/bootstrap-datepicker.%s.min.js' % (root, lang) for lang, _ in settings.LANGUAGES]
        return forms.Media(js=js, css=css)

然后我使用 BootstrapDatePicker 自定义类实现了我的表单：

class MyModelForm(BootstrapForm, forms.ModelForm):

    class Meta:
        model = myModel
        fields = ('field1', 'field2', 'date')
        widgets = 
            'data': BootstrapDateTimePicker(attrs='class': 'form-control'),
        

最后我在模板中加入了 js/css。