ブラウザから日時を入力させたくて、どうすれば素早く入力できるのかなぁと、いくつか試しました。前提は Bootstrap の responsive を使って、PC とスマートフォンで同じHTML/CSS を使う、ということです。別に、PCとスマートフォンで分けてもいいんだけど、まずは動くものを作りたいので、ブラウザ判定とかしない方向で。一方で、自分が使っている環境、Chrome on Mac OS X と Safari/Chrome on iOS 6、動けばよいので他のブラウザでの互換性は気にしていない。Android とか危うい気がする。
いくつか試してみたところ、 HTML5 の input タグの属性に type="datetime" や type="datetime-local" を指定するのが、いちばん入力しやすく、11秒で入力できました。入力しやすさ、の指標は「iPhone の Safari を使って、テキストフィールドに『ビール飲むぜ』と入力し、さらに、今から1時間以上先のキリのいい時間時刻(今が19:30なら21:00)を入力するまでの時間」です。
他の方法は以下のとおり。
- すべてテキストフィールド: 約30秒
- select と option タグ。分は10分刻み: 約30秒
- Bootstrap DateTime Picker
- 日時をひとつのフィールドで: 約30秒
- 日付と時刻を、別々のフィールドで: 約20秒
意外とどれを使ってもあまり変わらず。iPhone の場合、wheel scroller っていうんですかね、あれを、複数項目に対して使えるかどうか、が鍵なのかも知れません。