作成してきたモデルでは日付を入力する項目はDateFieldを設定してきましたが、デフォルトではフォームには単純なテキストボックスが表示されるのみです。そこで規定の書式で日付を入力しないとエラーとなるため使い勝手は非常に悪いです。
通常は日付入力用のJavaスクリプトなどを使ってカレンダー表示をさせたりする例が多いです。ただ、最近はhtml5対応のブラウザが主流になってきているため、html5対応を前提とするなら、html5の新しい機能である<input type=”date”・・・>を使うことができます。
htmlでは単純にtype=”date”と記載するだけですが、djangoではウィジェットを使うとスッキリするでしょう。
forms.pyを下記の通り変更します。
from django import forms
from .models import Seminar
from tinymce.widgets import TinyMCE
#追加
class DatePickWidget(forms.DateInput):
input_type="date"
class SeminarForm(forms.ModelForm):
class Meta:
model = Seminar
fields = (
"name",
"type",
"accept_start_date",
"accept_end_date",
"start_date",
"end_date",
"overview")
widgets={
"accept_start_date":DatePickWidget,#追加
"accept_end_date":DatePickWidget,#追加
"start_date":DatePickWidget,#追加
"end_date":DatePickWidget,
"overview":TinyMCE,
}
ビルトインウィジェットのDateInputをカスタマイズして使っています。DateInputはデフォルトではinput_type = “text”となっているため、”date”に変えています。これで出力されるhtmlでもtype=”date”で出力されるため、html5対応ブラウザではカレンダーから選択する形となります。
ちょっと調べても日付入力にカレンダー使う方法しか見つからなかったのですが、これはお手軽で素晴らしいです.
調べた中で一番お手軽で完璧な方法でした。
記録していただいててありがたかったです。
saekiさん
コメントありがとうございます。
自分の頭の整理用に書いていますが、少しでも参考になったようでよかったです。