Django 1.8 和 Django Crispy Forms:是否有实现日期选择器的简单易行的方法?
Django 1.8 & Django Crispy Forms: Is there a simple, easy way of implementing a Date Picker?
那里有非常多的 date/datetime 选择器实现。有没有和 Django 和 Crispy Forms 集成得特别好的,它们是如何使用的?
我希望尽量减少开发工作,尽量简化,并利用 Django 本地化。
日期字段的 Django/Crispy 标准输出:
<input class="dateinput form-control" id="id_birth_date" name="birth_date" type="text" value="21/07/2015">
在模型中:
birth_date = models.DateField(verbose_name='D.O.B', auto_now_add=False, auto_now=False)
谢谢!
编辑:
资料模型:
from django.db import models
class Profile(models.Model):
birth_date = models.DateField(verbose_name='D.O.B', auto_now_add=False, auto_now=False)
个人资料表格:
from django import forms
from profiles.models import Profile
class ProfileForm(forms.ModelForm):
class Meta:
model = Profile
birth_date = forms.DateField(
widget=forms.TextInput(
attrs={'type': 'date'}
)
)
个人资料视图:
from django.shortcuts import get_object_or_404
from django.contrib.auth import get_user_model
from profiles.models import Profile
from profiles.forms import ProfileForm
User = get_user_model()
def edit(request):
profile = get_object_or_404(Profile, user=request.user)
form = ProfileForm(request.POST or None, request.FILES or None, instance=profile)
if request.method == 'POST' and form.is_valid():
form.save()
context = {
'form': form,
'page_title': 'Edit Profile',
}
return render(request, 'profiles/edit.html', context)
个人资料编辑模板:
<form enctype="multipart/form-data" method="POST" action=".">
{% csrf_token %}
{{ form }}
<input class='btn btn-primary' type="submit" value="Submit" />
</form>
简单的方法是覆盖字段模板 :D
Field('field_name', template='date.html')
Here 来自@maraujop 的要点
这不是针对脆皮表格的答案,但只要输入具有 date
的 type
属性,较新的浏览器就会为您提供日期选择器。这属于最小开发工作量的类别。
date_field = forms.DateField(
widget=forms.TextInput(
attrs={'type': 'date'}
)
)
我的解决方案很简单,使用 https://eonasdan.github.io/bootstrap-datetimepicker/ 中的日期时间选择器。
包括 css 文件:
<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
包含 js 文件:
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/moment-master/min/moment.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>
为表单中的字段定义一个 css class(也适用于 Crispy):
class MyForm(forms.ModelForm):
class Meta:
model = MyModelo
fields = ['a','b','c']
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['a'].widget.attrs['class'] = 'datepicker'
在模板中包含一个 JQuery 函数链接到 css class:
<script type="text/javascript">
$(function () {
$('.datepicker').datetimepicker(
{
format: 'YYYY-MM-DD HH:mm:ss',
sideBySide: true
}
);
});
</script>
此解决方案适用于 Django 1.10、Crispy Forms 和 Django Model Forms。
django.forms.SelectDateWidget简单灵活:
date_field = forms.DateField(
widget=forms.SelectDateWidget(years, months, empty_label)
)
它甚至包含自己的模板文件。
只需使用 forms.py 中的小部件功能,如下例所示。
class projectForm(forms.ModelForm):
class Meta:
model = project
fields = '__all__'
widgets = {
'project_text': Textarea(attrs={'cols': 60, 'rows': 10}),
'report_date': forms.TextInput(attrs={'type': 'date'}),
'start_date': forms.TextInput(attrs={'type': 'date'}),
'end_date': forms.TextInput(attrs={'type': 'date'})
}
那里有非常多的 date/datetime 选择器实现。有没有和 Django 和 Crispy Forms 集成得特别好的,它们是如何使用的?
我希望尽量减少开发工作,尽量简化,并利用 Django 本地化。
日期字段的 Django/Crispy 标准输出:
<input class="dateinput form-control" id="id_birth_date" name="birth_date" type="text" value="21/07/2015">
在模型中:
birth_date = models.DateField(verbose_name='D.O.B', auto_now_add=False, auto_now=False)
谢谢!
编辑:
资料模型:
from django.db import models
class Profile(models.Model):
birth_date = models.DateField(verbose_name='D.O.B', auto_now_add=False, auto_now=False)
个人资料表格:
from django import forms
from profiles.models import Profile
class ProfileForm(forms.ModelForm):
class Meta:
model = Profile
birth_date = forms.DateField(
widget=forms.TextInput(
attrs={'type': 'date'}
)
)
个人资料视图:
from django.shortcuts import get_object_or_404
from django.contrib.auth import get_user_model
from profiles.models import Profile
from profiles.forms import ProfileForm
User = get_user_model()
def edit(request):
profile = get_object_or_404(Profile, user=request.user)
form = ProfileForm(request.POST or None, request.FILES or None, instance=profile)
if request.method == 'POST' and form.is_valid():
form.save()
context = {
'form': form,
'page_title': 'Edit Profile',
}
return render(request, 'profiles/edit.html', context)
个人资料编辑模板:
<form enctype="multipart/form-data" method="POST" action=".">
{% csrf_token %}
{{ form }}
<input class='btn btn-primary' type="submit" value="Submit" />
</form>
简单的方法是覆盖字段模板 :D
Field('field_name', template='date.html')
Here 来自@maraujop 的要点
这不是针对脆皮表格的答案,但只要输入具有 date
的 type
属性,较新的浏览器就会为您提供日期选择器。这属于最小开发工作量的类别。
date_field = forms.DateField(
widget=forms.TextInput(
attrs={'type': 'date'}
)
)
我的解决方案很简单,使用 https://eonasdan.github.io/bootstrap-datetimepicker/ 中的日期时间选择器。
包括 css 文件:
<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
包含 js 文件:
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/moment-master/min/moment.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>
为表单中的字段定义一个 css class(也适用于 Crispy):
class MyForm(forms.ModelForm):
class Meta:
model = MyModelo
fields = ['a','b','c']
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['a'].widget.attrs['class'] = 'datepicker'
在模板中包含一个 JQuery 函数链接到 css class:
<script type="text/javascript">
$(function () {
$('.datepicker').datetimepicker(
{
format: 'YYYY-MM-DD HH:mm:ss',
sideBySide: true
}
);
});
</script>
此解决方案适用于 Django 1.10、Crispy Forms 和 Django Model Forms。
django.forms.SelectDateWidget简单灵活:
date_field = forms.DateField(
widget=forms.SelectDateWidget(years, months, empty_label)
)
它甚至包含自己的模板文件。
只需使用 forms.py 中的小部件功能,如下例所示。
class projectForm(forms.ModelForm):
class Meta:
model = project
fields = '__all__'
widgets = {
'project_text': Textarea(attrs={'cols': 60, 'rows': 10}),
'report_date': forms.TextInput(attrs={'type': 'date'}),
'start_date': forms.TextInput(attrs={'type': 'date'}),
'end_date': forms.TextInput(attrs={'type': 'date'})
}