[申請承認アプリ]日付入力ウィジェット

作成してきたモデルでは日付を入力する項目は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対応ブラウザではカレンダーから選択する形となります。

「[申請承認アプリ]日付入力ウィジェット」への3件のフィードバック