Django 1.8& Django Crispy Forms:有一种简单易用的方法来实现日期选择器吗?

时间:2015-07-21 19:51:41

标签: django date datetime datepicker django-crispy-forms

那里有大量的日期/日期时间选择器实现。是否有任何与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>

4 个答案:

答案 0 :(得分:11)

不是快速表单的答案,但只要输入的type属性date,较新的浏览器就会为您添加日期选择器。这属于最小开发努力的范畴。

date_field = forms.DateField(
    widget=forms.TextInput(     
        attrs={'type': 'date'} 
    )
)                                           

答案 1 :(得分:3)

django.forms.SelectDateWidget简单灵活:

JFrame.getContentPane()

它甚至包含自己的模板文件。

答案 2 :(得分:0)

简便方法是覆盖字段模板:D

Field('field_name', template='date.html')
来自@maraujop的

Here要点

答案 3 :(得分:0)

我的解决方案很简单,并使用https://eonasdan.github.io/bootstrap-datetimepicker/中的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类(也适用于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'

在模板中包含一个链接到css类的JQuery函数:

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