目次
カレンダー入力を簡単に実現する「bootstrap_datepicker_plus」
日付の入力です。
日付をフリーハンドで手入力すると、サーバー側で日付チェックエラーになる確率が、どうしても高くなります。
なので、カレンダー入力を使うのが定石です。
カレンダー入力ができるライブラリはいろいろありますが、Django3.0+Bootstrap4の組合せにも、カレンダー入力をシンプルに実現できる手段「bootstrap_datepicker_plus」があります。
bootstrap_datepicker_plusのインストール
使うには、インストールが必要です。
pip install bootstrap_datepicker_plus
サンプルとしては日付のカレンダー入力だけをやります。
他にも色々できるみたいです。
興味がわいたらこちらで詳しく調べてください。
bootstrap_datepicker_plusの設定(settings.py)
使うためには、設定追加が必要です。
INSTALLED_APPS = [
・・・
'bootstrap_datepicker_plus',
]
INSTALLED_APPSに上記のように追記です。
bootstrap_datepicker_plusを「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}))
これで日本語化もできてます。
ポイントはここの部分です。
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行テキスト入力の時と同じやり方です。
実行イメージ
bootstrap_datepicker_plusで表示するカレンダーです。
入力した日付を受け取って表示したイメージです。
こんな感じです。
ではでは。