管理サイト外で日付選択ウィジェットを使う

管理サイトの日付選択ウィジェットを、管理サイト外で使いたいって要望は結構あるんじゃないかな。

まずはurls.pyでjsi18nへのマッピングを追加しておく。これがないと、テンプレートでadmin/jsi18nを参照しないといけない。ただしadmin配下なので、スタッフ権限のあるユーザーでログインしてないとうまく動いてくれない。当然ながら、それはちょっとどうかと思う。

from django.conf.urls.defaults import *

urlpatterns = patterns('',
    (r'^jsi18n/$', 'django.views.i18n.javascript_catalog', {'packages': 'django.conf'}),
)

テンプレートでjsi18nとmediaファイルへの参照を追加する。forms.cssがないと表示がメタメタになるので、指定した方がいい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{{ pagetitle }}</title>
{% block js %}
<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="/media/js/core.js"></script>
<script type="text/javascript" src="/media/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/media/js/calendar.js"></script>
<script type="text/javascript" src="/media/js/admin/DateTimeShortcuts.js"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="/media/css/forms.css" />
{% endblock %}
</head>

<body>
<input type="text" size="10" name="check_date" class="vDateField" id="id_check_date"/>
</body>

</html>

あとは日付選択ウィジェットを表示したいinputタグに、vDateFieldクラスを追加してやればいい。

Formで指定するならこんな感じ。

# -*- encoding: utf-8 -*-
from django.contrib.admin import widgets
from django import forms

class HogeForm(forms.Form):
    date = forms.DateField(label=u'日付', widget=widgets.AdminDateWidget)