How to use a JQuery Datepicker with the Django template language

Question

Looked at this link and found some help but I am wondering how I can choose to use a JQueryUI Datepicker widget for a DateField I have in my models.py

models.py

from django.db import models

class EModel(models.Model):

    date = models.DateField(blank=False)

forms.py

from django import forms
from models import EModel

class EForm(forms.ModelForm):
    class Meta:
        model = EModel

form.html - How Django renders my form. Not in the admin page

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Form</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body>
    <form action="" method="post">{% csrf_token %}
        {{ form.date }} <!-- ***** -->
        <!-- The rest of my form -->
    </form>
</body>

I am hoping for a way to make my 'date' model field render as a JQueryUI Datepicker widget, but I have searched around and found no way to link the two (in my case).

SOLUTION

In my forms.py

from django import forms
from models import EModel

class EForm(forms.ModelForm):
    class Meta:
        model = EModel
        widgets = {
            'date' : forms.DateInput(attrs={'type':'date'})
        }

score 9 · Accepted Answer · edited Nov 08 '13 at 16:24

9

Edit your date widgets attributes in your model form, giving them the class '.datepicker', as that's what the JQuery datepicker will look for. So your ModelForm becomes:

class EForm(forms.ModelForm):
    class Meta:
        model = EModel
        widgets = {'date': DateInput(attrs={'class': 'datepicker'})}

Documentation here.

edited Nov 08 '13 at 16:24

mariodev

13,928
3
49
61

answered Aug 07 '13 at 17:20

professorDante

2,290
16
26

1

The solution was an almost fix. I had used this line instead: widgets = {'date': forms.DateInput(attrs={'type':'date'}) } – reZach Aug 08 '13 at 13:37
1

Ah OK, I wasn't sure how you had configured your JQuery DatePicker - I always just use the class datepicker, as I have more than one input field on the form using it in most cases. – professorDante Aug 08 '13 at 17:10

score 2 · Answer 2 · edited Mar 11 '16 at 10:02

I use the following code and it works fine for me. I have mentioned all the files for this project,

models.py

    from django.db import models
    class EModel(models.Model):
        date = models.DateField(blank=False)

forms.py

    from django import forms
    from testApp.models import EModel
    class EForm(forms.ModelForm):
        class Meta:
            model = EModel
            widgets = {'date': forms.DateInput(attrs={'class': 'datepicker'})}

form.html

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Form</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
        $(function() {
            $( "#id_date" ).datepicker();
        });
        </script>
    </head>
    <body>
        <form action="/datepickerview/" method="post">{% csrf_token %}
            <!--{{ form.date }} -->
            <p>Date: <input name='date' type="text" id="id_date"></p>
            <!-- The rest of my form -->
            <input type="submit" value="login" />
        </form>
    </body>

views.py

    from django.shortcuts import render
    from django.http import HttpResponse
    from django.template import Context
    from django.shortcuts import render_to_response
    from django.http import HttpResponseRedirect
    from django.core.context_processors import csrf
    from django.template import RequestContext
    from forms import EForm
    def datepickerview(request):
        # Get the context from the request.
        context = RequestContext(request)
        # A HTTP POST?
        if request.method == 'POST':
            form = EForm(request.POST)
            # Have we been provided with a valid form?
            if form.is_valid():
                form.save(commit=True)
                return HttpResponse("Successfully added the date to database");
            else:
                # The supplied form contained errors - just print them to the terminal.
                print form.errors
        else:
            # If the request was not a POST, display the form to enter details.
            form = EForm()
        return render_to_response('form.html', {'form': form}, context)

urls.py

    from django.conf.urls import patterns, include, url
    from django.contrib import admin
    admin.autodiscover()
    urlpatterns = patterns('',
    url(r'^datepickerview/$', 'testApp.views.datepickerview'),
    )

admin.py

    from django.contrib import admin
    from testApp.models import EModel
    admin.site.register(EModel)

score 1 · Answer 3 · answered Aug 07 '13 at 14:56

The best is to create a new widget in a widgets.py file in your app:

Here is an example of mine for a color picker:

-- widgets.py --

from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe

class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            'all': (
                settings.STATIC_URL + 'colorpicker/css/colorpicker.css',
            )
        }
        js = (
            settings.STATIC_URL + 'js/jquery-1.8.3.min.js',
            settings.STATIC_URL + 'colorpicker/js/colorpicker.js',
        )

    def __init__(self, language=None, attrs=None):
        self.language = language or settings.LANGUAGE_CODE[:2]
        super(ColorPickerWidget, self).__init__(attrs=attrs)

    def render(self, name, value, attrs=None):
        rendered = super(ColorPickerWidget, self).render(name, value, attrs)
        return rendered + mark_safe(u'''
            <script type="text/javascript">
                jQuery('#id_%s').css("background-color", "#"+jQuery('#id_%s').val());
                jQuery('#id_%s').ColorPicker({
                    onSubmit: function(hsb, hex, rgb, el) {
                        jQuery(el).val(hex);
                        jQuery(el).css("background-color", "#"+hex);
                        jQuery(el).ColorPickerHide();
                    },
                    onBeforeShow: function () {
                        code = this.value
                        if (code.length==3) code = code.charAt(0)+code.charAt(0)+code.charAt(1)+code.charAt(1)+code.charAt(2)+code.charAt(2);
                        jQuery(this).ColorPickerSetColor(code);
                    }
                }).bind('keyup', function(){
                    el = jQuery(this);
                    code = el.val();
                    hex = '#'+code;
                    var isOk  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
                    if (isOk) {
                        el.css("background-color", hex);
                        if (code.length==3) code = code.charAt(0)+code.charAt(0)+code.charAt(1)+code.charAt(1)+code.charAt(2)+code.charAt(2);
                        el.ColorPickerSetColor(code);
                    }
                    else if (code=="") el.css("background-color", "");
                });
            </script>
            ''' % (name, name, name))

--- views.py ---

from django import forms ColorPickerWidget
from myapp.widgets import
class EditBackgroundForm(forms.Form):
    background = forms.CharField(max_length=10, widget= ColorPickerWidget(), required = False, label="Background color")

In additions you can also create a custom form field with your widget, and overide its clean() method.

How to use a JQuery Datepicker with the Django template language

3 Answers3

Linked