web-dev-qa-db-ja.com

複数の月を選択するために使用するコントロールは何ですか?

ユーザーに1年以内の月の範囲を選択する方法を提供したいと考えています。選択した月は、データの表を表示するために使用されます。コントロールはテーブルの上に配置する必要があります。垂直方向のスペースは限られているため、垂直方向のスペースをあまり使用しないでください。

チェックボックスのリストについて考えました:

[] January  [] February  [] March  [] April  [] May  [] June 
[] July  [] August  [] September  [] October  [] November  [] December

これには、どの月が選択されているかが明確でないという問題があります。これは、人々が壊れた範囲を選択できる可能性を提供します(これは許可されていますが、おそらく望んでいないでしょう)。

他のオプションは Chosen にあるような複数選択コントロールです。 Chosen Multiselect control

これは、12のオプションだけでは少しやり過ぎに思われます。

どのようなコントロールを使用できますか?

12
Pesikar

1年以内に1つの範囲を選択する場合は、2つの選択ボックスを使用して、それを非常にシンプル(かつ使いやすい)に保つことができると思います。

select boxes

利点:

  1. 最小限の垂直スペース
  2. 月の選択が簡単(ユーザーはタブで月の最初の文字を入力するだけです)
  3. 最小限の開発コスト
  4. ヘルパーを簡単に追加できます(選択された月数を示すヒントなど)

短所:

  1. 複数の範囲を選択するのは難しい
6
Alex

本当に1年以内であれば、 範囲スライダー が適切です。

enter image description here

ドリブルのケビン・アンダーソン経由

編集:

googleファイナンスサイトの日付範囲ピッカーは、以前の回答で問題を解決します。この例は月単位で「スナップ」しませんが、別の実装では確かに可能です。

enter image description here

12

通常、特定の形式に従うデータを要求する場合は、その形式で要求します。視覚的に人はカレンダーに表示される月に使用されますなので、カレンダーに表示し、必要な月を選択させます。

視覚的には、誰かがそうしたい月があるかどうかを簡単に確認できます。これは、入力された異なるデータの3つの例でどのように見えるかを示す簡単な例です。

enter image description here

12
JohnGB

月の範囲が年末にまたがる可能性がある場合は、おそらく円形の文字盤がより理にかなっています。

垂直方向のスペースが限られているため、ドロップダウンにする必要があります。

このような何か:

enter image description here

11
Roger Attrill

スライダーコントロールの種類についてはどうですか?ただし、開始ハンドルと終了ハンドルはありますか?このコントロールは、同時に選択できる日付の範囲のみを選択できることを明確に示します(上記のオプションのいずれかが示すように、ランダムに日付を選択することはできません)。

2
KarenVH

チェックボックス付きの複数選択ドロップダウンは、あなたの目的に役立ちます。そのシンプルで直感的です。

jQueryUI multi select widget

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

0
D K