如何在 Django 应用程序中使用 bootstrap-datepicker? [英] How to use the bootstrap-datepicker in Django app?

问题描述

我想使用 bootstrap-datepicker (https://bootstrap-datepicker.readthedocs.org) 在我的 Django 应用程序中.我使用 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><脚本>$(document).ready(function(){$('.datepicker').datepicker();});

在我的 forms.py 中，我有:

 类过滤器(django_filters.FilterSet):元类:模型 = 我的模型字段 = ['用户', 'date_from', 'date_to']小部件 = {'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).顺序很重要，请参阅上述帖子.

然后使用这个网站来获取您需要的日期时间选择器类型.如果您没有想要在其中嵌入日期时间选择器的模型表单，您只需将其复制到您的 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):元类:...小部件 = {'myDateField': forms.DateInput(attrs={'id': 'datetimepicker12'})}...

myForm.html:

...{% bootstrap_form 表单 %}...
<script type="text/javascript">$(函数(){$('#datetimepicker12').datetimepicker({内联:真实，并排:真实，format: 'DD.MM.YYYY'/*如果你也想使用时间，请删除这一行*/});});

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

I want to use the bootstrap-datepicker (https://bootstrap-datepicker.readthedocs.org) in my django application. I use Django 1.7.

In index.html file I have:

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

In my forms.py I have:

class Filter(django_filters.FilterSet):

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

I my model.py I use to set date:

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

When I'm going through the page with the date - does not work in input area.

解决方案

Update: Warning, this suggestion uses the dateTIMEpicker instead of datepicker. I suggested this because you don't have to use the time functionality of the datetimepicker, so it was quite handy in my case.

Since I have been trying to get datetimepicker to work (in combination with a model form) for quite some time, I thought I would post the solution, that feels like an accumulation of all stackoverflow posts on this topic ;)

So, first of all, make sure to also include moment.js, as it is required by bootstrap-datetimepicker (see this stackoverflow post). The order is important, see the mentioned post.

Then use this site to get the type of datetimepicker you need. If you have no model form in which you want to embed the datetimepicker, you should be fine with just copying that into your html code.

If you want to make one of your model forms field a fancy datepicker (without time) field like I did, then do the following:

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>

I hope I was able to save you some time :)

这篇关于如何在 Django 应用程序中使用 bootstrap-datepicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！