Re: Newbie to Novice – Using Admin DateTime Picker in your Form

I just installed Django Daterange Filter 1.3.0 (https://github.com/DXist/django-daterange-filter) on a Django 1.9 project. Took a little CSS fiddling to get it to display properly with Grappelli, but other than that it worked like a charm.

Nate

On Thursday, March 19, 2009 at 8:37:56 AM UTC-5, Paul Nema wrote:

I've noticed many people new to Django (and sometimes also new to Python) often post the same/similar questions in various forums. How to I get something to work and/or do you have an example for X. As I've also experienced this problem I've decided to post my little solution. Its not the only way to do this, just the way I did it. Hopefully this will provide the answer people are searching for or at least get them started. I guess it will also serve as a quick code review by those so inclined to comment.

You've probably heard of DRY but I think something is missing. There should also be a Don't Repeat Other's Work (DROW) when they already solved the problem. Thus another motivation to post this.  On a side note there is a bit of debate out there about using the Django AdminDateWidget verse other solutions (Jquery, etc). Your decision to make but why increase dependencies when you don't have to.

As I'm still learning Django everything in the code below may not be required but I'm listing it anyway. You may need to modify to your particular environment.  As I don't have a blog to post this I'm sending it to this group. I'm open to any suggestions for a better place to post this.

For this example I will focus on adding a date picker for date of birth (dob) and a date time picker for sponsor sign date (sponsor_sign_date). Key items are in Bold.

Another reference to adding the AdminDateTime widget is here: http://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form

---------------

My top level (django-admin.py startproject izbo) directory Structure:

mylogin@LX-D620:~/dev/izbo$ ll

drwxrwxr-x 2 mylogin mylogin 4096 2009-03-17 10:52 account/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-17 10:53 add/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-18 04:34 adjudicator/

drwxrwxr-x 2 mylogin mylogin 4096 2009-03-18 09:43 application/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-18 10:06 contract/

drwxrwxrwx 2 mylogin mylogin 4096 2009-03-18 09:49 DB/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-17 10:51 employer/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-18 04:34 entity/

-rw-r--r-- 1 mylogin mylogin 207 2009-03-08 04:54 exclude

drwxrwxrwx 2 mylogin mylogin 4096 2009-03-18 10:06 gzbo/

-rw-r--r-- 1 mylogin mylogin 0 2009-01-06 04:55 __init__.py

-rw-r--r-- 1 mylogin mylogin 546 2009-01-06 04:55 manage.py

drwxrwxrwx 5 mylogin mylogin 4096 2009-02-08 12:35 media/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-17 10:53 member/

drwxr-xr-x 2 mylogin mylogin 4096 2009-03-17 10:52 note/

drwxr-xr-x 2 mylogin mylogin 4096 2009-02-20 12:47 search/

-rw-r--r-- 1 mylogin mylogin 4192 2009-03-05 23:39 settings.py

drwxrwxrwx12 mylogin mylogin 4096 2009-03-16 11:48 templates/

-rw-r--r-- 1 mylogin mylogin 2118 2009-03-16 11:16 urls.py

--------------

Media directory Listing:

mylogin@LX-D620:~/dev/izbo/media$ ll

total 12

drwxr-xr-x 5 mylogin mylogin 4096 2009-03-18 10:56 admin/

drwxrwxrwx 2 mylogin mylogin 4096 2009-02-07 15:45 css/

drwxrwxrwx 2 mylogin mylogin 4096 2009-01-27 10:07 images/

lrwxrwxrwx 1 mylogin mylogin 36 2009-03-18 11:07 img -> /home/mylogin/dev/izbo/media/admin/img/

* Note: admin/ is 'cp -r' of directory /usr/lib/python2.5/site-packages/django/contrib/admin/media.  Then I linked the img directory.

------------

In my "settings.py"

import os.path

PROJECT_DIR = os.path.dirname(__file__)

MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')

MEDIA_URL = 'http://www.izbo.com/media/'

ADMIN_MEDIA_PREFIX = '/media/admin/'

TEMPLATE_DIRS = (

   os.path.join(PROJECT_DIR, 'templates'),

   ...

)

----------------

In my top level "urls.py" file

from django.contrib import admin

urlpatterns = patterns('',

   # Uncomment the admin/doc line below and add 'django.contrib.admindocs'

   # to INSTALLED_APPS to enable admin documentation:

   (r'^admin/doc/', include('django.contrib.admindocs.urls')),

   # Add this to get widgets.AdminDateWidget() working for non is_staff, is_superuser

   # This must be placed before (r'^admin/(.*)', admin.site.root), as that gobals up everything

   (r'^admin/jsi18n/$', 'django.views.i18n.javascript_catalog'),

   # Uncomment the next line to enable the admin:

   (r'^admin/(.*)', admin.site.root),

   # IZBO related URLs

   (r'^$', splash),

   .....

)

-------------

In "gzbo/models.py" I have my class

#

# Application

#

class App (Record) :

# Personal Information

dob = DateField(null=True,

    verbose_name=_('Date of Birth'),

    help_text=_('Enter Date of Birth Format: CCYY-MM-DD'))

sponsor_sign_date = DateTimeField(null=True,

    blank=True,

    verbose_name=_('Date Sponsor Electronically Signed'))

--------------

In "application/" I have a forms.py that describes the fields I want to have a date time picker

So in application/forms.py

#

# DJANGO Libraries

#

from django.forms import ModelForm

from django import forms

from django.contrib.admin import widgets

class AppForm(ModelForm) :

# Personal Information

dob = forms.DateField(

    widget = widgets.AdminDateWidget)

sponsor_sign_date = forms.DateTimeField ( required = False,

    widget = widgets.AdminSplitDateTime)

.... # other fields

class Meta :

   model = App

----------------

In "templates/application/appCreate.html" I have the follow. The src="/media/..." is referencing directory ~/dev/izbo/media

{% extends 'base.html' %}

{% block css %}

<link href="/media/css/main.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="/admin/jsi18n/"></script>

<script type="text/javascript" src="/media/admin/js/core.js"></script>

<script type="text/javascript" src="/media/admin/js/admin/RelatedObjectLookups.js"></script>

{{ form.media }}

{% endblock css %}

{% block title %}

IZBO - Application

{% endblock title %}

...

{{ form.as_p }}

...

Key scripts for date picker seem to be:

/admin/jsi18n/

/media/admin/js/core.js

and {{ form.media }} which adds the two lines below (calendar.js and DateTimeShortcuts.js)

/media/admin/js/calendar.js

/media/admin/js/admin/DateTimeShortcuts.js

Summary:

1. Update your settings.py file MEDIA_ROOT, MEDIA_URL and ADMIN_MEDIA_PREFIX to point to where you plan to keep the images and js for the picker. TEMPLATE_DIRS points to where you keep your template files.

2. Create a ModelForm based upon the class containing the date and/or datetime field/s

3. Reference the correct widgets for the date and/or datetime fields. I.E. widget = widgets.AdminDateWidget or widget = widgets.AdminSplitDateTime

4. In your template file reference the correct javascript stuff

5. Update your urls.py file to intercept the jsi18n call and send the correct version.

Have Fun, Stay Safe and Keep the Django Faith

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/7285196e-27e2-4880-97a9-7798d3f35ee6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.