Privacy Policy
Snippets index

  Using Django time/date widgets in custom form

Author: morlandi@brainstorm.it
Creato: Venerdì 02 Marzo 2012 18:46
Tags: django, date, template, l10n, forms

My own solution: Using JQuery datepicker but considering currently selected language

In "forms.py":

from django import forms
from django.utils import formats, translation

class MyForm(forms.ModelForm):

    class Meta:
        model = MyModel

    def get_locale_date_format():
        current_language = translation.get_language()
        #return formats.get_format('DATE_INPUT_FORMATS', lang=current_language)[-1]
        return '%m/%d/%Y' if current_language == 'en' else '%d/%m/%Y'

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        locale_date_format = self.get_locale_date_format()
        self.fields['my_date_field'].input_formats = [locale_date_format, ]
        self.fields['my_date_field'].widget = forms.DateInput(format=locale_date_format, attrs={'class': 'datepicker'})

And some JavaScript for the template:

<script src="{% static "js/jquery-ui-1.11.2/datepicker-it.js" %}"></script>
...

$(document).ready(function(){
    $.datepicker.setDefaults($.datepicker.regional['{{LANGUAGE_CODE}}']);
    $(".datepicker").datepicker();
});

Other alternatives:

(1) Using django.forms.extras.widgets.SelectDateWidget

Very simple, but the result is rather ugly

class PaymentsForm(forms.ModelForm):

    class Meta:
        model = Payments
        fields = ('date', ...)
        widgets = {
            'date': SelectDateWidget(),
        }

or

from django.forms.extras.widgets import SelectDateWidget

class PaymentsForm(forms.ModelForm):

    class Meta:
        model = Payments

    date = forms.DateField(widget=SelectDateWidget())

or

class PaymentsForm(forms.ModelForm):

    class Meta:
        model = Payments

    def __init__(self, *args, **kwargs):
        super(PaymentsForm, self).__init__(*args, **kwargs)
        self.fields['date'].widget = SelectDateWidget()

(2) Using django.contrib.admin.widgets.AdminDateWidget

In "forms.py":

from django import forms
from django.contrib.admin import widgets

class MyForm(forms.Form):
    date = forms.DateField(label=_('date'), widget=widgets.AdminDateWidget())

In "myform.html":

{% block blockbots %}
    <script type="text/javascript" src="/admin/jsi18n/"></script>
    <script type="text/javascript" src="/admin_media/js/core.js"></script>
    {{ form.media }}

    <link rel="stylesheet" type="text/css" href="/admin_media/css/forms.css"/>
    <link rel="stylesheet" type="text/css" href="/admin_media/css/base.css"/>
    <!-- <link rel="stylesheet" type="text/css" href="/admin_media/css/global.css"/> -->
    <link rel="stylesheet" type="text/css" href="/admin_media/css/widgets.css"/>

{% endblock blockbots %}

Eventually:

src="/media/admin/js/core.js"
instead of
src="/admin_media/js/core.js", etc ...

(3) Using JQuery datepicker

In "forms.py":

class MyForm(forms.ModelForm):

    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['my_date_field'].widget.attrs['class'] = 'datepicker'

And some JavaScript for the template:

$(".datepicker").datepicker();