win-django.com - Admin site以外でAdminWidgetsを使う

Admin site以外でAdminWidgetsを使う - AdminSplitDateTime編

Admin siteのwidget使ってみたくないですか?

Admin siteにある日付や時間の入力に便利なDate/TimePickerですが、
これをAdmin site以外でも使用したいと思いませんか?
少し手を加えるだけで利用することが出来ます。

仕様

Memo class構成(Form)

題名(title) TextInput
メモ(memo) Textarea
日付(date) TextInput: AdminSplitWidgetを利用

手始めに

手順はFormクラスを作成する方法と同じです。
まずはMemoクラスを定義します。

forms.py

from django import forms

class Memo(forms.Form):
    title = forms.CharField()
    memo = forms.CharField(widget = forms.widgets.Textarea)
    date = forms.DateTimeField(widget = forms.widgets.SplitDateTimeWidget)

次にtemplateを作成します。
まずはbase.htmlから

base.html

<html>
<head>
    <title></title>
</head>
<body>
    <H1>Use AdminSplitDateTime</H1>
    {% block content %}{% endblock %}
</body>
</html>

さらにMemo classを表示するmemo.htmlを作成します。

memo.html

{% extends "base.html" %}

{% block content %}
{{ form.as_p }}
{% endblock %}

最後にアクセスするURLと処理を行うviewを作成します。

views.py

from appname.forms import Memo
from django.shortcuts import render_to_response

def view_memo(request):
    form = Memo()
    return render_to_response('memo.html', {'form': form})

urls.py

from django.conf.urls.defaults import *
from django.contrib import admin

admin.autodiscover()

urlpatterns = patterns(''
    (r'^admin/', include(admin.site.urls)),
    (r'^memo/$', 'appname.views.view_memo'),
)

アクセスすると以下のように表示されます。

AdminSplitDateTimeを使用する

AdminSplitDateTimeを使用するには、widgetを変更したり、JavaScriptやCSSなどを読み込む設定をする必要があります。

Form変更

SplitDateTimeWidgetからAdminSplitDateTimeに変更します。

forms.py

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

class Memo(forms.Form):
    title = forms.CharField()
    note = forms.CharField(widget = forms.widgets.Textarea)
    date = forms.DateTime(widget = adminwidgets.AdminSplitDateTime)

template変更

読み込むJavaScript/CSSを定義します。

base.html

<html>
<head>
    <title></title>
    {% block scripts %}{% endblock %}
    {% block css %}{% endblock %}
</head>
<body>
    <H1>Use AdminSplitDateTime</H1>
    {% block content %}{% endblock %}
</body>
</html>

memo.html

{% extends "base.html" %}

{% block scripts %}
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/media/js/core.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/widgets.css"/>
<link rel="stylesheet" type="text/css" href="/media/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/media/css/forms.css"/>
{% endblock %}

{% block content %}
{{ form.as_p }}
{% endblock %}

urls.py変更

urls.pyも修正する必要があります。

urls.py

from django.conf.urls.defaults import *
from django.contrib import admin

admin.autodiscover()

urlpatterns += patterns('',
    (r'^admin/jsi18n/$', 'django.views.i18n.javascript_catalog'),
    (r'^admin/', include(admin.site.urls)),
    (r'^memo/$', 'appname.views.view_memo'),
)

以下のようになります。