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

2022.07.24 / 2022.07.24

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

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

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

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

Django：テンプレートと変数

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

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

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

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

テンプレートでは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" }}>

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

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