我想在我的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()
当我浏览带有日期的页面时 – 在输入区域中不起作用.
解决方法
更新：警告,此建议使用dateTIMEpicker而不是datepicker.我建议这样做是因为你不必使用datetimepicker的时间功能,所以在我的情况下它非常方便.
由于我一直试图让datetimepicker工作(与模型表单结合)很长一段时间,我想我会发布解决方案,感觉就像是关于这个主题的所有stackoverflow帖子的积累;)
所以,首先,确保还包括moment.js,因为bootstrap-datetimepicker需要它(见this stackoverflow post).订单很重要,请参阅上述帖子.
然后使用this site获取所需的datetimepicker类型.如果您没有要在其中嵌入datetimepicker的模型表单,那么只需将其复制到您的HTML代码中即可.
如果你想让你的一个模型表单字段像我一样做一个花哨的datepicker(没有时间)字段,那么执行以下操作：
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>
我希望我能节省你一些时间:)
