0

簡単なタスクを実行する必要があります:

2 つの日付ピッカーを表示:

ワンバイmonth and year、セコンドregular。

カレンダー部分を非表示にして月と年のみを表示する CSS スタイルを見つけることに成功しました。

<style type="text/css">
      .ui-datepicker-calendar {    display: none;    }​
</style>

しかし、私は言うことを見つけることができません：このdatepickerインスタンスはこのcssを自己適用する必要があり、もう一方はそうすべきではありません。

cssを 1 つのコントロールにのみ適用するようにコードを修正するにはどうすればよいですか?

ここに画像の説明を入力

4

2 に答える 2

1

display: none唯一の属性を持つ日付ピッカーに 2 番目のクラスを明示的に追加するかstyle、制限された日付ピッカーを明示的に設定します。例:

$('.ui-datepicker-calendar').first().css('display', 'none');

機能しないEDIT 1-2つの日付ピッカーは同じ要素を共有しているため、そのように区別することはできません。

編集2これまでに私ができる最善のことは、これを追加することです:

$('#datepicker').click(function() {
    $('.ui-datepicker-calendar').hide();
});

これはカレンダーを非表示にしますが、残念ながら、カレンダーが消える前に非常に短時間表示されます.

EDIT 3解決！:)

秘訣は、グローバル CSS をすべての日付ピッカーに適用して、デフォルトで非表示にすることですが、トリガーされるたびに他の日付ピッカーのカレンダー フィールドを明示的に表示することです。

$('#datepicker2').click(function() {
    $('.ui-datepicker-calendar').show();
});

これは、カレンダーがほんの一瞬表示されてから再び消えるよりも、はるかに視覚的に魅力的です。

注意: 日付ピッカーを表示させるその他の UI イベントに対して、このハンドラーを登録する必要がある場合があります.click()。これだけでは不十分な場合があります。

http://jsbin.com/oredoy/で動作するデモ

于 2012-06-25T15:49:47.853 に答える
0

私が正しく理解している場合、両方の日付ピッカーに同じcssクラスを使用しています->両方とも同じように動作します(予想どおり)。

「ui-calendar-monthYear」と「ui-calendar-regular」の 2 つの別個のクラスを定義し、それらを日付ピッカーに割り当てます。

于 2012-06-25T15:51:19.690 に答える