カレンダー入力を簡単に実現する「bootstrap_datepicker_plus」／Django3.0＋Bootstrap4

目次

カレンダー入力を簡単に実現する「bootstrap_datepicker_plus」

日付の入力です。

日付をフリーハンドで手入力すると、サーバー側で日付チェックエラーになる確率が、どうしても高くなります。

なので、カレンダー入力を使うのが定石です。

カレンダー入力ができるライブラリはいろいろありますが、Django3.0＋Bootstrap4の組合せにも、カレンダー入力をシンプルに実現できる手段「bootstrap_datepicker_plus」があります。

bootstrap_datepicker_plusのインストール

使うには、インストールが必要です。

pip install bootstrap_datepicker_plus

サンプルとしては日付のカレンダー入力だけをやります。

他にも色々できるみたいです。

興味がわいたらこちらで詳しく調べてください。

github.com

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行テキスト入力の時と同じやり方です。

arakan-pgm-ai.hatenablog.com

実行イメージ

bootstrap_datepicker_plusで表示するカレンダーです。

入力した日付を受け取って表示したイメージです。

こんな感じです。

ではでは。