2013-04-29

input type="datetime" で、ブラウザから素早く日時を入力する

ブラウザから日時を入力させたくて、どうすれば素早く入力できるのかなぁと、いくつか試しました。前提は 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 っていうんですかね、あれを、複数項目に対して使えるかどうか、が鍵なのかも知れません。