生年月日を入力するための最良のUIは何ですか？[閉まっている]

生年月日セレクターの最良の方法は何ですか？

• 3つのテキスト入力（月/日/年）または1つのマスク入力。ユーザーはキーボードを使用する必要があります
• 3つの選択ボックス。ユーザーはキーボードまたはマウスを使用できます。
• 1つの素晴らしい日付ピッカー。

私は最も使いやすく問題のない解決策を知りたいので、ユーザーはまったく混乱しません。

上級ユーザーにとっては、テキスト入力が最適です。ユーザーが日付形式を知っている場合は、非常に高速です。それほど熟練していないユーザーには、日付ピッカーの使用をお勧めします。通常、上級ユーザーと非上級ユーザーもいるので、テキスト入力と日付ピッカーの組み合わせをお勧めします。

「ユーザーがまったく混乱しないようにする」ことが目標の場合は、これが最良のオプションだと思います。

生年月日にはデートピッカーはお勧めしません。まず、年（クリック、クリック、クリック…）を参照し、次に月（さらにクリック）を参照して、グリッド上の小さな数字を見つけてクリックする必要があります。

日付ピッカーは、2月の第2週の旅行を計画している場合など、頭の上から正確な日付がわからない場合に役立ちます。

これは非常に古い質問ですが、特に登録フォームで生年月日を正しく入力することは非常に重要です。

私は誰もこれをグーグルアカウントのサインアップより上手にやっていないと思います：

最初に選択ボックスから月を選択し、日付と年を手動で入力します。シンプル。

検証が簡単です。ユーザーが正しく理解するのは簡単です。1900年から現在の年まで、選択ボックスで年をスクロールして戻す必要はありません。月の入力に基づいて「日」選択ボックスを更新する必要はありません。ウェブ上でうまく機能します。モバイルでうまく動作します。2014年10月1日など、すべてのロケールで機能します-それは10月1日ですか、1月10日ですか？今後、この誕生日ピッカー形式がもっと見られると思います。

日付ピッカーは、すべての面で不十分なソリューションです。非常に多くのクリック！私の意見では、日付ピッカーは、チケットの予約など、曜日を知ることが重要な場合にのみ役立ちます。

2016年2月6日更新：私は英国出身なので、月/日/年よりも日/月/年の形式に慣れています。ただし、カーソルを使用して月を選択するユーザーは、入力>選択ボックス>入力に行くよりも、選択ボックスを最初に持つ方がはるかに簡単だと思います。コメントの日付は2月6日ではなく6月2日です;）

このJakob Nielsenの記事で述べたように、ユーザーによく知られているデータのドロップダウンリストは避けてください。

生年月日など、ユーザーによく知られているデータのメニュー。そのような情報は、ユーザーの指に組み込まれることが多く、メニューからそのようなオプションを選択する必要があるため、情報を入力するための標準的なパラダイムを破り、ユーザーの作業を増やすことさえできます。

理想的なソリューションは、おそらく次のようなものです。

• 日、月、年の3つの個別のテキストボックスを提供します（適切にラベルが付けられます）
• ユーザーのカルチャに従ってテキストボックスを並べ替えます。
• 2桁の入力が想定されるように、日と月のテキストボックスのサイズを変更する必要があります。
• 年のテキストボックスのサイズは、4桁の年と見なされるサイズにする必要があります。
• ユーザーが2桁または4桁の年を入力できるようにします。2桁の年が1900であると仮定し、テキストボックスを更新して、このonBlur（または次の確認手順）を反映させます。
• ユーザーが月番号または月名を入力できるようにします。

編集：以下は、DOBピッカーを実装する方法です。iOSデバイスで数字キーボードを強制するために、HTML5正規表現でマスクされたテキスト入力フィールド。

http://www.huntercourse.com/usa/texas/

人は特定の生年月日を入力するのに慣れているため、生年月日は他の日付とは異なります。例のテキストボックスには、明確素早く入力するのは簡単です：

 _______
|_______| (example: 31/3/1970)

これは1/1/1970や20/07/70などの柔軟なフォーマットをサポートするはずです。

異なる日付の規則（たとえば、米国と英国）で異なる文化をサポートする必要がある場合、この例に注意しない人にとっては、これはエラーが発生しやすくなる可能性があります。これを回避するには
、月の選択リスト、および日付と年のテキストボックスを使用できます。

 _________   __   ____
|March  |V| |__| |____|

これにより、日と月の順序のあいまいさがなくなりますが、使用するのが少し不格好です。

Datejsを見てください。

Datejsは、オープンソースのJavaScript日付ライブラリです。

包括的でありながら、シンプルでステルスで高速です。Datejsはすべての試験に合格し、ストライキの準備ができています。Datejsは文字列を解析するだけでなく、文字列を2つにきれいにスライスします。

設計ではなく解決の圧倒的な多さに悩んでいます。OPは、「最も使いやすく問題のないソリューションを知りたいので、ユーザーを混乱させることはありません」と述べました。したがって、jQuery、JavaScript、C＃、FORTRANのいずれであっても、デザインは重要です。ここで重要なのはUIデザインではなく、UXデザインです。（正しくない、非論理的な構成「UX / UI」を回避するための別の嘆願）。

テキスト入力を使用します。日、月、年（または月、日、年）というラベルの付いた3つのボックスを使用します。ユーザーに日付を入力させます。同じインタラクションでテキストとリストを混在させることは悪いことです（たとえば、年にはテキスト入力を使用せず、月と日には日付ピッカーまたはリストを使用してください）。

フィールド内の形式のヒントを使用する単一のテキストフィールドを使用します。たとえば、[日/月/年]形式を厳密に要求しないでください。ユーザーが月を期待する場所にJUNと入力した場合は、バックエンドで6月を使用します。ユーザーが月を期待する場所に6と入力した場合、バックエンドで6月を使用します。ユーザーが月を期待する場所に06と入力した場合、バックエンドで6月を使用します。

OccamのRazorをガイドとして使用します（ほとんどの場合、データは十分正確です）。認知摩擦を減らします（ユーザーに考えさせないでください）。

DatePickerとフィールドの組み合わせもお勧めします

このデモをご覧ください。日付ピッカーは、ユーザーがフィールドに入力した日付を反映しています。
ただし、PrototypeおよびScriptaculousを使用したDatePickerに基づいています。説明のために言及します。

ユーザーと一緒にdatePickerを試しましたが、UIが悪いことがわかりました。私が最終的に彼らのリクエストに基づいているのは、彼らがすぐに[日] [月] [年] :(

両方を入れて、それぞれをもう一方に更新します。ユーザーが日付ピッカーから日付を選択した場合、テキストフィールドの小さな誤クリックを修正したり、日付ピッカーのテキストフィールドに入力した選択肢を視覚化したりするのは簡単です。

3つすべてをテストして、パフォーマンスが最も良いものを選んでみませんか？これは、Googleウェブサイトオプティマイザーのテストに適した候補のようです。

所有しているユーザーのタイプ、または実行しているサイトのタイプによって、ソリューションが「標準」とは異なるものである必要がある場合があります。

私は通常両方を使用します-正しい形式でテキストフィールドに入力する日付ピッカー。上級ユーザーはテキストフィールドを直接編集でき、マウスを使用するユーザーは日付ピッカーを使用して選択できます。

スペースが気になる場合は、通常、テキストフィールドの横に小さなカレンダーアイコンが表示されています。カレンダーアイコンをクリックすると、日付ピッカーがポップアップとして表示されます。

また、正しい形式を示すテキストをテキストフィールドに事前に入力することをお勧めします（例： "DD / MM / YYYY"）。ユーザーがテキストフィールドにフォーカスすると、そのテキストが消えて自分で入力できるようになります。

ここの高齢者の一人で、月末に生まれたので、私は誕生日のドロップダウンメニューに不満を感じています。私は通常、2つのドロップダウンメニューを下にスクロールする必要がありますが、これは厄介です。私はむしろそれをタイプインしたいです。

ドロップダウンメニューを受け入れるか入力できるように設計されたコントロールがあり、両方が機能することを明確にすることができれば、それはすばらしいことです。

日付ピッカーを使用するかどうかは、日付がどのくらい前かによって異なります。それらが通常今月のものであり、数か月以上前のものではなく、Javascriptが存在することがわかっている場合は、日付ピッカーが適しています。日付が最近ではない場合（たとえば、誕生日）は、これが最良の選択肢だと思います。

http://img411.imageshack.us/img411/6328/mockupg.png

これは、年がドロップダウンではなくテキストボックスであるという点で、Patrick McElhaneyの回答とは異なります。数百要素の長さのドロップダウンボックスから数を選択することは、ユーザーにとって非常に煩わしいことです。

日付ピッカーは、誕生日を入力するための移動をもっと複雑にするだけだと思います。

既に述べたように、ユーザーにとっては、日と月のドロップリストと年のテキストボックスの組み合わせが最も効率的です。この方法で誕生日を入力するのに10秒もかかりません。これは日付ピッカーよりもはるかに高速です。タブキー（すべてのユーザーがフォームの入力に使用する方法を学ぶ必要がある）のおかげで、1つのフォームからすばやく移動できます。次の要素への要素。

少なくともMacintosh（Windowsについては知りません）では、キーボードを使用して選択ボックス内の日付にアクセスすることもできます。タブキーのおかげで、フォーム要素にフォーカスが移り、矢印キーを押してドロップダウンしますリスト、たとえば1967と入力すると、瞬く間にそこに着きます…

海外のサイトでは、日付ピッカー（およびフォールバックとしてフォーマットが文書化された入力ボックス）を好みます。

日付の形式はさまざまで、慣れていると読みにくいことがあります。ISO 8601に慣れていない人が多すぎます。:-(

各フィールドにドロップダウンメニューを使用して、それぞれに日、月、年のラベルを付けることをお勧めします。日付ピッカーも役立つかもしれませんが、ユーザーがJavaScriptを有効にしていない場合は機能しません。

私はDatePickerを取ります。これは、エキスパートユーザーが手動で入力できるようにし、初心者が簡単に日付を入力できるようにする唯一のコンポーネントです。

タブを押して入力するのではなく、ボタンをクリックすると、カレンダーがポップアップしません。そのため、エキスパートユーザーがそれに悩まされることはありません。

jQuery UI DatePickerを誰が使用しませんか？

ほぼすべてのニーズに合わせて構成できます。唯一の欠点は、jQuery UIに含める場合、フットプリントがやや大きいことです。

更新

一部のファイルサイズは変更されているように見えるため、以下で更新します。これらの数値は、それらが最後に更新されたときのみ正しいことを覚えておいてください。その後、状況が変わった可能性があります。

• CSSテーマ-23kb
• jQuery UI-71kb縮小
• DatePicker-38kb
• さらに、いくつかの画像（翌月/前月、私はかなり確信している）

しかし、それはそれほど悪くない...

JQueryUIの日時ピッカーは、プロユーザーがテキストボックスに独自の値を入力したり、ピッカーから選択したりできるため、最適なオプションです。

ピッカーを設定して誕生日や将来の日付を簡単に入力できるようにするのも簡単です。

$（ '＃datepicker'）。datepicker（{
    changeMonth：true、
    changeYear：true、
    yearRange： '-100：+50'
}）;

これは次のようなものを示しています（新しいユーザーとして写真を投稿できません：http : //klalex.com/wp-content/uploads/2009/07/picture-1.png）

yearRangeは、DateTime.Now.Year-100からDateTime.Now.Year + 50までの日付を示します

これを見つけました：http : //klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

JSFiddleのプラグインを発見しました。2つの可能な選択肢：1つの入力または3つの入力ですが、1つの入力のように見えます...（次の入力に移動するには、Tabキーを使用します）

[リンク] http://jsfiddle.net/davidelrizzo/c8ASE/面白そうですね！

プラグインの誕生日ピッカーを試すことができると思います、

プラグインcxcalendarを使用できます。他の日付ピッカーのように見えます。ただし、年月のタイトルをクリックすると、selectで年と月を選択できます。

生年月日の選択用に3つのドロップダウンを作成し、年と月の選択に基づいて日数を動的に変更しました。http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();