知識の枝

"All is well"

Django テンプレート内で日付を使ってif分岐

約180日前 2021年5月30日19:11
デジタル
Django HTML

改訂履歴


2021/5/30 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回はhtmlテンプレートの中で日付を使ったif分岐を使う方法を解説します。


2. 目的(or ゴール)


日付によってCSSの色を変える


3. はじめに


まずはやりたいことのイメージ共有です。



上記はタスク管理画面の一部です。

日にちによって色が異なることが分かると思います。
左側の日付は「着手予定日」
右側の日付は「完了予定日」 です。


着手予定日が今日から1週間以内の場合は「水色」
着手予定日を過ぎている場合は「赤色」
着手予定日が1週間以上先の場合は「薄グレー」

というように色分けされています。


今回は上記のように、
「日付によって条件分岐し、適用するCSSを変える」ことを実装したいと思います。


4. 日付の条件分岐


htmlテンプレートの中で条件分岐します。

Djangoのテンプレートタグを使いましょう。
{% if ●● %}
というものですね。


まず先に完成形を見て下さい。
html
<ul>
{% for each_task in tasks %}
<li>
<h6>{{each_task.title}}
{% for person in each_task.assign.all %}
<span class="badge bg-primary">{{person.name}}</span>
{% endfor %}

<!--ここから日付に関する分岐-->
{% if each_task.finish %} #完了日が入力されていたら
<span class="badge bg-secondary">{{each_task.start}}</span> #グレー色
<i class="fas fa-angle-double-right"></i>
<span class="badge bg-secondary">{{each_task.finish}}</span> #グレー色
{% else %} #完了日が入力されていない場合
{% if each_task.start %} #着手日が入力されていたら
<span class="badge bg-warning text-dark">{{each_task.start}}</span> #黄色
<i class="fas fa-angle-double-right"></i>
{% if each_task.plan_to_finish > today %} #完了予定日が今日より先の日付なら
<span class="badge bg-light text-dark">{{each_task.plan_to_finish}}</span> #薄グレー色
{% else %} #完了予定日を過ぎているなら
<span class="badge bg-danger">{{each_task.plan_to_finish}}</span> #赤色
{% endif %}
{% else %} #未着手なら
{% if each_task.plan_to_start > today %} #着手予定日が今日より先の日付なら
{% if each_task.plan_to_start > one_week_later %} #着手予定日が1週間以上先なら
<span class="badge bg-light text-dark">{{each_task.plan_to_start}}</span> #薄グレー
<i class="fas fa-angle-double-right"></i>
<span class="badge bg-light text-dark">{{each_task.plan_to_finish}}</span> #薄グレー
{% else %} #着手予定日が1週間以内なら
<span class="badge bg-info text-dark">{{each_task.plan_to_start}}</span> #水色
<i class="fas fa-angle-double-right"></i>
<span class="badge bg-light text-dark">{{each_task.plan_to_finish}}</span> #薄グレー
{% endif %}
{% else %} #着手予定日を過ぎているなら
<span class="badge bg-danger">{{each_task.plan_to_start}}</span> #赤色
<i class="fas fa-angle-double-right"></i>
{% if each_task.plan_to_finish > today %} #完了予定日が今日より先の日付なら
<span class="badge bg-light text-dark">{{each_task.plan_to_finish}}</span> #薄グレー
{% else %} #完了予定日を過ぎているなら
<span class="badge bg-danger">{{each_task.plan_to_finish}}</span> #赤色
{% endif %}
{% endif %}
{% endif %}
{% endif %}
</h6>
</li>
{% endfor %}
</ul>
色々分岐はありますが、「今日の日付」によって分岐が変わる箇所がいくつかあります。

まずはここ
{% if each_task.plan_to_finish > today %}
todayはテンプレート変数です。

views.pyで今日の日付を変数「today」に入れてhtmlに渡してあります。
views.py
from datetime import date, timedelta

~~~~~~

today = date.today()

context = {
'today': today,
}

return render(request, template, context)



他にも1週間先の日付の変数「one_week_later」を使った分岐もあります。
{% if each_task.plan_to_start > one_week_later %}
これも上記と同様にvoews.pyの中で定義し、テンプレートに渡しています。

views.py
from datetime import date, timedelta

~~~~~~

today = date.today()
one_week_later = today + timedelta(days=7)

context = {
'today': today,
'one_week_later': one_week_later,
}

return render(request, template, context)



日付を使ってテンプレート内で分岐するには

①まずviews.py内で分岐に使いたい日付を定義する
②定義した日付の変数をテンプレートに渡す
③{% if %}を使って分岐する


以上の手順で可能です。


5. さいごに


分岐を使いこなして見易いページを作成しましょう!