デモ画面をDjangoで作っていて、時々、度忘れして困ることを、自分用を兼ねて、サンプルを書いておきます。
今回はカレンダー入力。
環境は Windows + anaconda です。
文字で入力するとチェックが面倒
こちらの記事で日付を1行テキスト入力でやりました。
これでもいいんですが、問題点がひとつ。
所詮、手入力ですから、サーバー側で日付チェックエラーになる確率が、どうしても高くなります。
なので、カレンダー入力を使う。
これが、まあ定石です。
bootstrap_datepicker_plus
有難いことに。
Django2.0+Bootstrap4の組合せなら、カレンダー入力をシンプルに実現できる手段があります。
bootstrap_datepicker_plus です。
これを使うには、とりあえずインストールが必要です。
pip install bootstrap_datepicker_plus
今回は日付のカレンダー入力だけをやります。
他にも色々できるみたいですけど、自分はほぼ使わないので、必要になったら調べればいいかな・・って感じです。
そんときは、こちらを調べます。
settings.py
使うためには、設定追加が必要です。
INSTALLED_APPS = [
・・・
'bootstrap_datepicker_plus',
]
INSTALLED_APPSに上記のように追記です。
forms.py
1行入力「CharField」にカレンダー入力のWidgetを追加する感じです。
from django import forms import bootstrap_datepicker_plus as datetimepicker class DafForm(forms.Form): one = forms.CharField( label='カレンダー入力', required=False, disabled=False, widget = datetimepicker.DatePickerInput( format='%Y/%m/%d', attrs={'readonly': 'true','id': 'one'}, options={ 'locale': 'ja', 'dayViewHeaderFormat': 'YYYY年 MMMM', 'ignoreReadonly': True, 'allowInputToggle': True}))
これで日本語化もできてます。
楽ちんです。
views.py
カレンダー入力を表示して、選択された日付を受け取って、一応日付チェック(ほぼ、エラーになるはずがないのですが)して、入力値を表示する。
それだけの処理です。
from django.http.response import HttpResponse from django.shortcuts import render, render_to_response from django.contrib.staticfiles.templatetags.staticfiles import static from . import forms from django.template.context_processors import csrf import datetime import os def demo4(request): if request.method == 'POST': one = request.POST["one"] if _is_date_error(one): ret = '日付変換エラーが発生しました。(' + one + ')' else: ret = one c = {'ret':ret} else: form = forms.DafForm() ret = '' c = {'form': form,'ret':ret} # CFRF対策(必須) c.update(csrf(request)) return render(request,'demo05.html',c) # サーバー側バリデーション。日付に変換できるかを試している def _is_date_error(datestring): try: tdatetime = datetime.datetime.strptime(datestring, '%Y/%m/%d') tdate = datetime.date(tdatetime.year, tdatetime.month, tdatetime.day) return False except: return True
特に補足の必要はないくらい、シンプルです。
HTML(demo05.html)
{% block content %} {{ form.media }} <div class="container bg-light"> <form action="" method="post">{% csrf_token %} <h1>ビルトインフォームサンプル</h1> {% if ret %} <div class="form-group row my-4"> <label class="col-lg-3 col-form-label"> <h4>入力日付</h4> </label> <div class="col-lg-6"> <h4>{{ ret }}</h4> </div> </div> {% else %} {% for key,val in errors.items %} <h2>{{ key }} : {{ val }}</h2> {% endfor %} {% for field in form %} <div class="form-group row my-4"> <label class="col-lg-3 col-form-label"> <h4>{{ field.label_tag }}</h4> </label> <div class="col-lg-6"> {{ field|add_class:"form-control font-weight-bold" }} </div> </div> {% endfor %} <div class="form-group row my-4"> <div class="col-lg-3"> <button type="submit" class="btn btn-primary">送信する</button> </div> </div> {% endif %} </form> </div> {% endblock %}
表示するHTMLテンプレートは、1行テキスト入力の時と同じやり方です。
今回の記事の前提
django、bootstrapのインストールや利用設定、および、djangoで入力画面を作る部分は、以下の記事の内容を前提にしています。
実行イメージ
さて。
runserverで実行します。
初期表示
実行後の結果表示
こんな感じです。
ではでは。