2015年5月4日月曜日

django.forms で、datetime-local を使う。

HTML5では、UTC(協定世界時)によらないローカル日時(datetime-local)の入力欄を作成することが出来ます。
これにより、カレンダー型式で入力を行えるようになるので、とても便利です。

でも、これを Django で使うまでが一苦労..

ポイントを纏めておきます。

#環境等
・GAE(Google App Engine)/Python
・Django 1.4
・jquery mobile 1.4

1.モデル

# こんな感じです。NDB使ってます。
class Event(ndb.Model):
 start_dt = ndb.DateTimeProperty() # イベントの開始日時の例です。
 ..

2.フォームオブジェクト

# インプットタイプを指定します。
forms.DateTimeInput.input_type="datetime-local"

# フォームの入力フィールドです。
class EventForm(forms.Form):
 start_dt = forms.DateTimeField(label='開始日時:', widget=forms.DateTimeInput, input_formats=['%Y-%m-%dT%H:%M'])
 ..

 # widget で、forms.DateTimeInput を指定することにより、ローカル日時(datetime-local)の入力欄を表示します。
 # input_formats で、バリデーションの型 '%Y-%m-%dT%H:%M' を定義します。ここ重要!!

3.テンプレート

<form method="POST" action="/post/">
<div class="ui-field-contain">{{ form.start_dt.label_tag }}{{ form.start_dt.errors }}{{ form.start_dt }}</div>
..

# jquery mobile では、ui-field-contain で括って、ラベルとかエラーとか表示させます。

4.データの書き込み

def post(request):
 if request.method == 'POST':
  form = EventForm(request.POST)
  if form.is_valid():
   e = Event()
   e.start_dt = form.cleaned_data['start_dt']
   e.put()

   # バリデーションチェック後、データを書き込みます。

5.データをフォームに渡す

# データを取り出し
e = Event.get_by_id(key)

# strftime で、日時フォーマットを変更
start_dt = e.start_dt.strftime("%Y-%m-%dT%H:%M")

# フォームオブジェクトを生成
data = {
  'start_dt' : start_dt,
  ..
}
form = EventForm(data)


参考
http://www.htmq.com/html5/input.shtml
http://docs.djangoproject.jp/en/latest/topics/forms/index.html
http://stackoverflow.com/questions/16201343/input-formats-to-datetimefield