デートピッカー

定義

デートピッカーは、ユーザーが日付を自分でタイプする代わりに、カレンダーを見ながら 日付をタップして選べるようにするコントロールです。ふつうはトリガーを押すと一か月分の カレンダーが開き、選びたい日付のマスをタップすると、その日が選択されて入力値に 反映されます。このときカレンダーは、曜日の並び、今日の日付、そしてユーザーが たった今選んだ日を、それぞれ違う見た目で区別して見せてくれます。おかげでユーザーは、 何日が何曜日なのか、今がいつなのかを頭の中で計算しなくても、目で確かめながら 正確な日付を選べます。予約や配送のように日付が大事な流れでとくによく使われ、 形式の入力ミスを減らしてくれる仕掛けでもあります。

なぜ重要か

日付は、人が手で書くとミスがとりわけ起きやすい値です。形式を年-月-日で書くのか 月-日-年で書くのか迷いますし、その日が何曜日なのかもわかりにくい。デートピッカーは カレンダーを目の前に広げて、こうした負担を軽くしてくれます。ユーザーは曜日を見ながら 週末を避けたり、今日の印を基準にして何日後かを見当をつけたりしながら選べます。 さらに予約や配送のように選べる日があらかじめ決まっている場面では、選べない日を そもそも押せなくしておけば、間違った日付を選んでから初めてエラーに出会う、という ことを未然に防げます。開始日と終了日をいっしょに選ぶ期間選択でも、ルールを目で 案内してミスを防ぎます。結局のところデートピッカーは、入力ミスを減らし、流れが 途切れないように守ってくれる仕掛けなのです。

よくある間違い

• カレンダー選択だけを用意して、直接タイプできなくしてしまうケースです。生年月日の ようにずっと昔をさかのぼるときは、カレンダーを何年分もめくらねばならず面倒です。 日付をすでに知っているユーザーには、数字で直接入力できたほうがずっと速いのです。
• 選べない日付を止めないことです。過ぎた日や締め切った日、開始日より前の終了日まで 選べるままにしておくと、ユーザーは選び終えて送信する段階になって初めて「だめだ」 というエラーに出会い、最初から選び直すはめになります。
• 今日と選択日を区別して見せないことです。どのマスが今日で、どのマスをたった今 選んだのかが一目でわからないと、ユーザーは自分がちゃんと選べているのか確信を 持てないまま、手を止めて迷ってしまいます。

実務のヒント

• 直接タイプとカレンダー選択の両方を用意しましょう。2026-07-14のように知っている 日付はそのまま書き、はっきりしない日付はカレンダーで眺めながら選べるように二つの 道を開けておけば、どんな状況でも快適です。
• 選べない日付は無効状態でうすく表示して、そもそも押せないようにしましょう。開始日 より前の日を終了日に選べなくするなど、範囲のルールを先に処理しておけば、間違った 組み合わせそのものが生まれません。
• 今日・選択日・選べない日を、色と形ではっきり区別しましょう。今日には枠線を、 選択日には塗りつぶした背景を、止められた日にはうすい色を与えると、ユーザーは カレンダーをずっと速く読み取れます。

関連概念