読者です 読者をやめる 読者になる 読者になる

AWS / PHP / Python ちょいメモ

amazon web service , PHP, Python を使ったときのメモ。日本語でググってもわからなかった事を中心に。

Django で AdminDateWidget を使う手順

Django が標準で持ってる admin は、便利です。ここで使われている widget を、自分のWebAppに使ってみる手順を まとめました。複数widgetがありますが、カレンダーから日付を選択するAdminDateWidgetを導入してみます。

前提

  • Django 1.6.x 以降 (以前のバージョンだと、staticの取り扱いが若干異なる為)
  • admin を導入済み (admin の static を参照する為。説明の簡略化という話も。。。)

admin 導入を前提にしているのは admin/css/*.css やら admin/js/*.js などをテンプレートから参照するためです。

手順

大きく2つのステップで組み込み完了です。

  1. temlates に 必要なリソース(css, js)を記述
  2. forms.py に widgetの指定

templates 編集

組み込みたいtemplateのヘッダに、次のコードを書きます。結構沢山あります(;

<script type="text/javascript">window.__admin_media_prefix__ = "{{ STATIC_URL }}admin/";</script>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/forms.css" />
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>

1行目は、カレンダーに使う画像などをロードするのに必要な情報。
2行目移行は、AdminDateWidgetで必要になるリソース群です。

{{ STATIC_URL }} の部分は、標準だと settings.py で /static/ に設定されているはずです。

ちなみに、jquery.js は jquery.min.js も同梱されているので、そちらを指定しても可 (admin では DEBUG フラグにより出し分けしてます)。

forms.py 編集

まずライブラリをインポート

from django.contrib.admin.widgets import AdminDateWidget

次に、AdminDataWidget(カレンダー)を表示したフィールドの定義を修正

    start_date = fields.DateField(
        widget = AdminDateWidget,
        )

これで完了。

参考

Web

ソース

  • site-packages/django/contrib/admin/widgets.py
    • widgetクラスが定義されています
  • site-packages/django/contrib/admin/options.py
    • Modelのフィールドタイプ毎にwidgetの指定を行っています
  • site-packages/django/contrib/admin/templates/
    • base.html
    • change_form.html, change_list.html, change_list.html

その他

提供されるカレンダーは、InputBoxの値をみて表示する年月を自動で変更してくれたり使い勝手は良く、オススメです。

ただAdminDateWidgetが前提としているcssは、adminに適用されているものです。その為、全く違うcssをベースで開発しているWebAppだと、バッティングが予想され調整が難儀(というか、難儀でした)。

admin に追加する形で作るWebAppとかに適用するのが、綺麗な流れなのかもしれませんね。