DjangoのFormをカレンダー入力に対応させる方法について解説

今回はDjangoの入力フォームをdjango-bootstrap-datepicker-plusを用いて簡単にカレンダー入力に実装する方法を解説いたします。

かなり簡単にいい感じの見た目で実装できますので、特にカレンダー入力にこだわりがないケースであればおすすめです。

スポンサーリンク
目次

方法

まずは、どのような方法になるのか簡単に説明しておきます。

カレンダーの入力を簡単にする有名なライブラリとして [Datepicker] といわれるものがありますが、これを [Bootstrap] といわれるデザインのフレームワークと連携させたライブラリを Django でも使っていこうという手段です。

見た目としては以下のようになります。

サードパーティー製のライブラリを使った手段になりますので、オリジナルで作ったり、Djangoに元から含まれている機能を利用したりというわけではありませんのであしからず。

サードパーティー製のライブラリが使えない、抵抗があるといった要件の場合はご自身で新たに作って必要がありますのでそこはご理解ください。

必要なライブラリのインストールと設定

それではまずはライブラリをインストールしていきます。
なお、Djangoや必要な環境等は予めインストールされている前提でお話いたします。

インストールするライブラリは以下の2つです。

1. django-bootstrap4
2. django-bootstrap-datepicker-plus

1. それでは最初にターミナルを起動して “dajngo-boostrap41” をインストールします。
仮想環境がある人は activate コマンドで仮想環境を有効にして以下のコマンドを入れます。

activate 仮想環境名 #仮想環境がある人だけ
pip install django-bootstrap4

2. successfullyと表示されたら続いて “django-bootstrap-datepicker-plus” をインストールします。
ターミナルに以下のコマンドを入力してください。

pip install django-bootstrap-datepicker-plus

successfullyと表示されれば完了です。

3. インストールが完了したらプロジェクト直下にある [setting.py] に設定を追加します。
[INSTALLED_APPS]“bootstrap4” “bootstrap_datepicker_plus” を以下のように追加してください。
場所は末尾で構いません。

4. 続いて [TEMPLATES][OPTIONS] の項目にも以下のように設定 “builtins” を追加します。

5. 最後に、jqueryを使用する宣言を以下のように追記してください。

ex. その他、django のアプリを最初から作るよ!っていう人はhtml ファイルを配置する tmplate フォルダをDjangoに認識させるため以下のように設定します。(すでに自分でwebアプリがある人は不要です。)

これで設定の準備は完了です。

ソースコードの用意

それではDjangoのフォーム機能を使って実際にカレンダー機能を実装していきたいと思います。

ここで紹介するアクセスルートと環境は以下のようになっているので、自分の環境に置き換えてみてください。
なお、appフォルダは見づらくなるから記載しておりませんが後述するコマンドで新しく追加されるフォルダですのでご留意ください。

app フォルダの追加

まずはアプリケーションの機能を提供するためのフォルダを作ります。
上記の画像でいう[app]フォルダがそれです。
なお、すでに自分のプロジェクトがあるという人は [forms.py] のところまで飛ばしてください。

コマンドプロンプト等のターミナルでプロジェクト直下の[manage.py] がある階層までターミナルで移動し、以下のコマンドを入力します。

cd c:\work\mysite #移動のコマンド例

python manage.py startapp polls

これを実行することで “app” という名前のフォルダと基本的なファイルが作成され、new 以外のファイルがすべてあれば大丈夫です。

urls.py の追記と新規作成

次に[urls.py] を修正、追記していきます。

まずは mysite フォルダにある [urls.py] からです。
まずは django のプロジェクトにアクセスされたリクエストが app フォルダの方にいく用に以下のように設定します。

[urls.py] にはもともと長いコメントやadminサイトへのパスが記載されていますが、ここに一行 app へのパスを記載します。

“app.urls” とすることで app フォルダの [urls.py] に処理が流れるようになります。

追記が完了したら 上記の処理を [views.py] に渡すように以下のような内容の [urls.py] ファイルを app フォルダに新規作成します。

こうすることで、 [views.py] の “IndexView” という関数に処理が渡されます。

views.py の追記

次にhtmlに渡すパラメータを記載していきます。
パラメータを処理するのは基本的には [views.py] で行います。

そのため [vies.py] を以下のように書き換えます。

[views.py] には [urls.py] に記載したクラス、”IndexView” を定義し、パラメータを用意する関数、 get の時に実施する関数、post の時に実施する関数を定義します。
form の内容を取得するために “get_context_data” の関数の中にある、 “context” にパラメータを格納するとそれが html ファイルに渡されるのでここにフォームの内容を渡します。

今回は表示するまでの内容を解説しますので、 post には特に何も処理を記載しません。
また、 get は “template_name” に指定した html ファイルに処理を渡すのでとくには変える必要はないです。

forms.py

[forms.py] は新規で追加する内容になります。
恐らくここが一番のポイントになると思います。

[form.py] には以下のようにパラメータを定義します。

formのパラメータは開始日と終了日の2つです。
ポイントは以下の通りで、”DatePicker” の場合は “DateField” の “widget” に “DatePickerInput” を指定します。

start_date = forms.DateField(
label=”開始日”,
widget=DatePickerInput(
format=’%Y-%m-%d’ #formに入る日付の書式を指定
,options={
‘locale’: ‘ja’ #言語を指定
,’dayViewHeaderFormat’: ‘YYYY年 MMMM’, #カレンダーの日付の表示書式を指定
})
)

当然、“DatePickerInput” は import する必要があることに注意してください。
この import 文が古い情報だとwidgets の階層が含まれておらずエラーになってしまうのでちゃんと以下のように記載してください。

from bootstrap_datepicker_plus.widgets import DatePickerInput


“DatePickerInput” に各種オプションを記載してますが、デフォルトでよければ何も書かなくても大丈夫です。

htmlファイルの編集

最後に画面に表示するためのhtmlファイルを編集します。
ない場合は新規に作成します。(ここでは [test.html] としています。)

まずは最初に boostrap の datepicker の表示に必要な js ファイルや css ファイルを読み込むために以下の3行を記載します。

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery=’full’ %}

さらにformのデザイン表示に必要なパーツが {{form.media}} に入っているので form の表示の前に記載しています。

{{ form.media }}
{{ form.as_p }}

こうすることで以下のように表示されるはずです。

{{from.media}} がないと以下のようにエラーが表示されてしまいますので、このエラーを見かけたら
{{form.media}} の記載が抜けていないかチェックしてください。

form.media was not loaded, did you forget to add it to template? This message is only visible when DEBUG=True

その他、時間表示も併せた [DateTimePickerInput] や 時間表示のみの [TimePickerInput] 等々もありますので各々必要なformを選択してください。

いかがでしょうか。
上手く表示されない等ございましたらご連絡いただけますと幸いです。

今回はここまでです。
お疲れ様でした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

本業ではPHPを使ったWEBアプリやJavaを使用した基幹アプリを作成しております。Pythonは個人的に勉強しており、E資格を取ったりしたおかげで、業務でAIの研究とかも任されるようになりました。学習のアウトプットのために本サイトを運営しておりますが、これからPythonを学ぶという人のお役に立てればいいなと思います。わからないことや調査して記事にしてほしいことがございましたらご連絡いただけると幸いです。

コメント

コメントする

目次
閉じる