web-dev-qa-db-ja.com

入力フィールドの代わりにラベルまたはdivにjquerydatepickerを呼び出す/バインドする方法

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

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

javascriptjquerydatepicker
17
stringo0

コードを見ていませんが、<input type="text">要素にアタッチされていることを前提としていると思われます。

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

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

$(labelselector).click(function() {
    $(inputselector).datepicker('show');
});
17
Ken Browning

re：位置決めの問題

上記の提案は、クリーンなUIを取得するのに役立ちませんでした。ユーザーがラベルをクリックしたときに日付ピッカーコントロールをアクティブにしましたが、テキストボックスをまったく表示したくありませんでした（上記のcssの試行は終了しましたが、テキストボックスは他の問題の中でも特にフォーカスされていました）。

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

特に、通常の入力コントロールスタイルを表示：なし、または可視性：非表示などに設定しても機能しませんでした。

このソリューションが機能した理由は、「type！= "hidden"の場合にのみ特定の機能を実行する、datepickerコントロールのソース内の句によるものです。

11
Joel Friedlaender

クリック時に表示されるように、または結果がラベルまたは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>

これはFireFox3.5でうまくいきました

6
shanabus

re：位置決めの問題：

Datepickerは、ターゲットとする要素のオフセットに基づいて、その位置を絶対的に設定しているように見えます。残念ながら、表示：どの要素にもオフセットがありません。

2つの提案された方法：

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

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

2）入力を非表示にする別の方法を試してください。たとえば、不透明度：0（およびそのIE同等、filter：alpha（opacity = x））など）。もう1つ試してみるのは、次のように、入力フィールドを減らすための一連のスタイル。

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

表示ページから実際に削除せずに、入力をできるだけ非表示に近づけます。これは、datepickerが位置を取得するために存在する必要があります。

1
Doug Avery

テキストをトリガーとして機能させたいと思いました。 display-inline div内の入力に、opacity: 0、position: absolute + pointer-events: noneを使用して、入力を実質的に非表示にすることで、これを解決しました。

ここで私の例を参照してください： http://codepen.io/KATT/pen/XJbmVr

1
Alex

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'];
0
Yara