【Django】フォーム:日付入力欄(type="date")に変数が反映されず空白になる

時計 2022.07.24 / 時計

【Django】フォーム:日付入力欄(type="date")に変数が反映されず空白になる

記事ではDjangoによるWebアプリケーションで、フォームの日付入力欄inputタグのtype="date")にvalue属性に指定した変数が反映されず空白になってしまう問題について解説していきます。

Djangoのテンプレート上では、views.pyから渡された変数に格納された値を表示することができます。

例えばフォームのipnutタグのvalue属性に変数を指定して、データベースに格納されている現在の値を表示するということができます。

しかしここで日付入力欄(type="date")に変数が反映されず空白で表示されてしまうという現象が発生することがあります。本記事を通して、この問題の解決方法について理解を深めていってください。

Django:テンプレートと変数

テンプレートとは

問題の解決に向けて、基本的なところから一つ一つ解説していきます。まずはテンプレートについてです。

Djangoではテンプレートという仕組みを利用してHTMLを生成しWebページを表示します。一度でもDjangoでWebアプリケーションを作成したことがある方には当たり前のことですね。DjangoでWebアプリケーションを作成する手順をもう一度確かめたい方は以下記事をご参照ください。

テンプレートでは以下の機能を利用して、柔軟にHTMLを生成できます。

  1. 変数(コンテキスト)に格納された値・文字列の表示
  2. 変数の内容を変更して表示(フィルター)
  3. 条件分岐やループなどのロジックの組み込み(タグ)

本記事で利用する機能は1番と2番です。より詳しくテンプレートについて知りたい方は以下記事をご参照ください。

テンプレートで変数(コンテキスト)を表示

テンプレートではviews.pyから渡された変数(コンテキスト)を表示することができます。

テンプレートエンジンDjangoTemplatesはテンプレート内に変数を見つけると、変数を値に変換します。変数は”{{”と”}}”で囲んで使用します。

構文

{{ 変数 }}

変数をフィルターで加工

テンプレートにはフィルターという機能が備わっております。フィルターとはviews.pyから受け取った変数を加工する仕組みです。

この機能を利用することで変数を自由に操作することができます。

フィルターは変数名の後に「|」(パイプ)を記入し、続けてフィルター名を書いて使用します。

構文

{{ 変数名 | フィルター名: '引数' }}

最初から利用できる組み込みフィルターは種類が豊富です。詳しくは以下記事をご参照ください。

日付入力欄に変数が反映されず空白になる問題の解決

日付入力欄に変数が反映されず空白になっている場合、以下のように記述していることが原因です。

<input type="date" name="date" value={{ today }}>

ここでなにが問題かというと、そのまま変数todayをvalue属性に指定していることです。

日付入力欄に値を表示するためには、その値を日付の表示形式にフォーマットしてやる必要があります。

そこで利用するのが、テンプレートに備わっているフィルター機能です。以下のように組み込みフィルターであるdateを使って、値をdate形式にフォーマットします。

<input type="date" name="date" value={{ today|date:"Y-m-d" }}>

上記の方法を用いることで入力欄に日付が表示されるようになるはずです。ぜひ試してみてください。

テンプレート上で日付をフォーマットする方法については以下記事でより詳しく解説しております。ぜひこちらも併せて読んでみてください。