17

このページでjqueryui datepickerを使用しています- http://jqueryui.com/demos/datepicker/

入力フィールドではなくラベルで呼び出すにはどうすればよいですか? これは可能ですか？

4

6 に答える 6

17

<input type="text">コードは見ていませんが、要素に関連付けられていると想定していると思われます。

したがって、その要素が必要であると仮定します。

<input>ラベル イベントからのメソッドの呼び出しを介して、日付ピッカーを非表示にして対話することができます。

$(labelselector).click(function() {
    $(inputselector).datepicker('show');
});
于 2009-08-11T18:32:21.217 に答える
11

re: ポジショニングの問題

上記の提案は、きれいなUIを得るためにうまくいきませんでした。人々がラベルをクリックすると日付ピッカーコントロールがアクティブになり、テキストボックスをまったく表示したくありませんでした (上記の css の試みは近いものでしたが、他の問題の中でもテキストボックスにフォーカスがありました)。

私にとっての解決策は、日付ピッカーが < input type="hidden" .... /> に接続されているテキストボックスを作成することでした。これにより、すべての問題が解決しました（非表示の入力コントロールをラベルの直前に配置して、入力コントロールからのオフセットは私のラベルに適していました)。

特に、通常の入力コントロール スタイルを display: none、または visibility: hidden などに設定しても機能しませんでした。

この解決策が機能した理由は、datepicker コントロールのソース内に、「type != "hidden".

于 2010-03-15T10:51:56.460 に答える
6

クリックすると表示されるように、または結果がラベルまたは Div に入力されるようにバインドしようとしていますか? それを非表示のテキスト ボックスにバインドし、目的の効果をその非表示フィールドの change() イベントにバインドできます。 

$(function() {
        $("#datepicker").datepicker();

            $("#alternate").click(function() {
                $("#datepicker").focus();
            });

        $("#datepicker").change(function() {
            $("#alternate").html($("#datepicker").val());
        });
    });

<input id="datepicker" style="display:none" /><label id="alternate">change me</label>

これは、FireFox 3.5でうまくいきました

于 2009-08-11T18:55:13.137 に答える
1

re: ポジショニングの問題:

Datepicker は、対象となる要素のオフセットに基づいて、その位置を絶対的に設定しているようです。残念ながら、display: none 要素にはオフセットがありません。

2 つの推奨される方法:

1) 日付ピッカー独自の方法と選択したオブジェクトのオフセットを使用して位置を設定します。次のようなものを試してください：

offset = $('myinput').parent('label').offset();
$('#date-picker').dpSetOffset(offset.left, offset.top);

2) 入力を非表示にする別の方法を試してください。おそらく opacity: 0 (およびそれに相当する IE の filter:alpha(opacity=x)) などです。もう 1 つ試してみるべきことは、次のように、入力フィールドを減らすために一連のスタイルを設定することです。

.my_input {
  border: 0;
  line-height: 0;
  font-size: 0;
  height: 0;
  overflow: hidden;
 }

日付ピッカーが位置を取得するために存在する必要がある表示ページから実際に削除することなく、可能な限り非表示に近い入力を取得します。

于 2009-08-13T01:12:02.830 に答える
0

Datepciker は input(textbox) 要素で初期化しますが、このバグによると非表示の入力で初期化できませんでした。jqueryUi のソースを少し変更したトリックを見つけました。

_findPos: function(obj) {
    var inst = this._getInst(obj);
    var isRTL = this._get(inst, 'isRTL');
    while (obj && (obj.type == 'hidden' || obj.nodeType != 1 || $.expr.filters.hidden(obj))) {
        obj = obj[isRTL ? 'previousSibling' : 'nextSibling'] || obj.parentNode;
    }

変化はここにあった

    obj = obj[isRTL ? 'previousSibling' : 'nextSibling'];
于 2012-12-29T20:07:12.527 に答える