時間を選択する機能で変更されたjQueryUIのデータピッカーを使用しています( http://trentrichardson.com/examples/timepicker/#basic_examples )。日付を入力する代わりに、より恒久的に見えるようにしたいので、日付をspan
などに入れ、その横にカレンダーアイコンを含めます。これにより、日時の選択ダイアログが開きます。日付を変更して[完了]をクリックすると、データベースに保存されます。日付を選択しなくても大丈夫ですか?日付がない場合は、日付の代わりにspan
に「None Selected」のようなものを含めます。
さて、私の質問です。日付が以前にユーザーによって保存されている場合、日付を選択しないように変更するにはどうすればよいですか?カレンダーアイコンの横にXを少し置くこともできますが、これは少し弱いようです。
「Now」ボタンと「Done」ボタンの間のスペースは、「日付をクリア」(または他の適切な凡例)ボタンを求めて私に向かって叫んでいます。
Skwokz提案の一種のバリアントです。私はそのウィジェットのカスタマイズを扱ってきましたが、私の解決策はそれを回避することです。
ここでの私の好ましいUIには、日付入力の上または下があります。
元の日付をリストすると、ユーザーは何が変更されたかを確認でき、クリックアクション(「この値を使用」)は非常に明白です。 Xは「ウィジェットをクリアする」ためのかなり理解された標準になったと思います(少なくとも、Appleはこれをすべて使用しています)。
もう一度クリック。
何かを選択すると、それがオプションであることを認識し、実際には提供しないほうがよいと判断します。最も自然なことは、選択したアイテムをもう一度押すことです。
これは、おなじみのチェックボックスと物理的なプッシュボタンをエコーします。
私はこのUIを好みます。ユーザーが日付を選択すると、入力コントロールの「削除」アイコンが表示されます。アイコンをクリックするだけで、選択した日付を削除できます。
新しい選択を「元に戻し」、以前の選択に戻す一般的な方法は、キャンセルボタンを追加することです。ただし、ここに合わせるのは少し面倒です。 「x」はうまく機能すると思いますが、目に見えるように配置する必要があります。
または、「リセット」ボタンを押すと、保存された選択が再選択されます。その後、ユーザーは完了をクリックしてセレクターを閉じます。特にユーザーが最初に何かを選択しようとしたときに、リセットするための保存された選択がない場合、「リセット」は必ずしも明確ではないため、これはあまり好きではありません。