35

jQueryUIの日付ピッカーは動的な位置でレンダリングされます。十分なスペースがある場合はcssに従ってレンダリングしますが、十分なウィンドウスペースがない場合は、画面にレンダリングしようとします。画面の位置やその他の状況に関係なく、毎回同じ場所に配置してレンダリングする必要があります。これはjQueryUIdatepickerでどのように行うことができますか？jQuery datepickerの他の実装にはこれを行う方法があるようですが、UIバージョンでそれを行う方法がわかりません。

答えは、cssを変更するだけではないようです。

.ui-datepicker { width: 17em; padding: .2em .2em 0; (trying top/margin-top/position:relative, etc. here...)}

... datepickerが作成されると、要素スタイルで上部と左側が動的に作成されます。これを回避する方法はまだ見つかりません。私が見たアプローチの1つは、beforeShowオプションで次のようなものを指定することです。

beforeShow: function(input,inst){
                                inst.dpDiv.css({ 
                                   'top': input.offsetHeight+ 'px', 
                                   'left':(input.offsetWidth - input.width)+ 'px'
                                               });
                                }

これにはある程度の効果がありますが、datepickerがレンダリングされるときにこれが実行された後も、上部と左側のプロパティは動的に設定されます。まだ画面にレンダリングしようとしています。常に同じ場所にレンダリングするにはどうすればよいですか？私の次のステップは、おそらくデートピッカーの内臓に入り、物事を引き出し始めることです。何か案は？

（UIバージョンの）答えは次の場所にないことに注意してください。

4

13 に答える 13

66

これを投稿することで、他の人の役に立つことを願っています。少なくともdatepickerのv1.8.1以降、'window.DP_jQuery.datepicker'の使用は機能しなくなりました。これは、ポインター（右の用語？）に作成のタイムスタンプが付けられているためです。たとえば、'windowになります。 DP_jQuery_1273700460448'。したがって、datepickerオブジェクトへのポインタを使用するのではなく、次のように直接参照します。

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

私が必要なものを手に入れてくれた以下の答えに感謝します。

于 2010-05-12T21:53:06.763 に答える
10

編集： JaredCは、上記のjQueryの新しいバージョンに対して更新された回答を提供しました。受け入れられた答えをそれに切り替えます。

機能を有効/無効にするオプションが提供されていないため、これは常にビューポートでレンダリングしようとする機能にモンキーパッチを適用する問題です。幸いなことに、それは1つの関数で切り離されて分離されているので、ただ入ってオーバーライドすることができます。次のコードは、その機能のみを完全に無効にします。

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

_checkOffsetは、開いているときに呼び出され、オフセットに対して計算を実行し、ビューポートの外側にある場合は新しいオフセットを返します。これにより、関数本体が置き換えられ、元のオフセットがそのまま通過します。次に、beforeShow設定ハックや.ui-datepicker cssクラスを使用して、好きな場所に配置できます。

于 2009-11-30T20:21:45.070 に答える
6

datepickerを使用した後にfocusinをバインドするdatepickerのウィジェットのCSSを変更する

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});
于 2013-02-22T09:09:15.750 に答える
4

私が抱えていた問題は、日付ピッカーがファンシー/ライトボックスなどの固定要素内に正しく配置されていないことです。何らかの理由で、これが発生すると、日付ピッカーが「固定」ポジショニングモードに切り替わり、絶対ポジショニングが正常に機能した場合にオフセット計算が正しくなくなります。

ただし、このハックで正しい固定位置を取得できます。

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
    _checkOffset: function(inst, offset, isFixed) {
        if(!isFixed) {
            return checkOffset.apply(this, arguments);
        }

        let isRTL = this._get(inst, "isRTL");
        let obj = inst.input[0];

        while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
            obj = obj[isRTL ? "previousSibling" : "nextSibling"];
        }

        let rect = obj.getBoundingClientRect();

        return {
            top: rect.top,
            left: rect.left,
        };
    }
});
于 2016-06-02T18:13:07.413 に答える
4

jQueryを使用する場合：

beforeShow : function(input,inst){
    var offset = $(input).offset();
    var height = $(input).height();
    window.setTimeout(function () {
        $(inst.dpDiv).css({ top: (offset.top + height) + 'px', left:offset.left + 'px' })
    }, 1);
}
于 2016-06-06T19:43:50.793 に答える
1

たとえば、cssファイルでは次のようになります。

#ui-datepicker-div {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
}

重要な設定は、それが何であれ、インラインのデフォルトを上書きします。

于 2012-10-12T14:41:11.123 に答える
1

以前、datepicker.jsのbeforeShowイベントに残されたtopを指定しようとしましたが、これはjquery-ui-custom.jsの_showDatePickerメソッドによってオーバーライドされます。しかし、タイムアウト後、ウィンドウは正常に機能します。以下はコードです

beforeShow : function(input,inst) {
  var offset = js.select("#" + dpId).offset();
                        var height = js.select("#" + dpId).height();
                        var width = js.select("#" + dpId).width();
                        window.setTimeout(function () {
                              js.select(inst.dpDiv).css({ top: (offset.top + height - 185) + 'px', left: (offset.left + width + 50) + 'px' })
                        }, 1);
}
于 2014-06-18T14:22:16.447 に答える
1

これはかなり古い質問ですが、最近、jQueryUIDatepickerでこれに似た問題が発生しました。上記の@JaredCによって投稿されたソリューション（具体的にはこのコードスニペット:)をすでに使用し$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});ていましたが、ドロップダウンをレンダリングする必要のある入力があるモーダルでは機能しませんでした。

この問題が発生するのは、ページを下にスクロールすると、モーダルの入力のオフセットが、スクロールされたページの上部に対して変化するためです。結果として生じる動作は、ページを下にスクロールした距離に応じて、日付ピッカーが異なる垂直位置でレンダリングされることを意味します（注：表示されている間、日付ピッカーはすでに修正されています）。この問題（「モーダル内にネストされたdatepicker入力」）の解決策は、代わりに、ビュー画面に対する入力の垂直位置を計算してから、入力の高さを追加することです（datepickerの「top」cssプロパティを入力のすぐ下にあります）。

次のスニペットはcoffeescriptにあります。@JaredCのソリューションに従って通常のオフセットを返す代わりに、'inst'オブジェクトから入力のelementIdを取得し、jqueryを介してオブジェクトにアクセスして、画面の上部からの入力の距離を計算します。ビューポート。 

# CoffeeScript
$.extend( $.datepicker, { _checkOffset: (inst,offset,isFixed) ->
        offset.top = $("##{inst.id}").offset().top - $(window).scrollTop() + $("##{inst.id}")[0].getBoundingClientRect().height
        offset
    }
)

// JavaScript
$.extend($.datepicker, {
    _checkOffset: function(inst, offset, isFixed) {
        offset.top = $("#" + inst.id).offset().top - $(window).scrollTop() + $("#" + inst.id)[0].getBoundingClientRect().height;
        return offset;
    }
});
于 2016-03-09T20:39:30.470 に答える
1

受け入れられた答えは全体的に非常にうまく機能します。

ただし、jQuery UI v1.11.4を使用すると、ブラウザーウィンドウが下にスクロールされたときに、日付ピッカーがモーダルウィンドウの入力から離れた位置に配置される（固定位置）という問題がありました。受け入れられた回答を次のように編集して、この問題を修正することができました。

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
  _checkOffset: function(inst, offset, isFixed) {
    if(isFixed) {
      return checkOffset.apply(this, arguments);
    } else {
      return offset;
    }
  }
});
于 2016-08-01T18:20:10.793 に答える
1 
$("first-selector").datepicker().bind('click',function () {
      $("#ui-datepicker-div").appendTo("other-selector");
});

<style>
#ui-datepicker-div {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        z-index: 99999999 !important;
}
</style>
于 2018-04-19T11:37:39.850 に答える
1

これは私にとってそれがどのようにうまくいったかです：

$( "input[name='birthdate']" ).datepicker({
    beforeShow : function(input,inst){
    window.setTimeout(function () {
        $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: input });
    }, 1);
    }
});

画面のサイズが変更されたときに配置するには、次の手順に従います。

$(window).resize(function(){ $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: "input[name='birthdate']" }); });
于 2018-08-17T06:45:50.050 に答える
-1

これがより簡単な解決策です

var $picker = $( ".myspanclass" ).datepicker(); // span has display: inline-block
$picker.find('.ui-datepicker').css('margin-left', '-50px');
于 2013-02-09T21:22:29.190 に答える
-1

デフォルトでは、日付ピッカーのカレンダーは入力ボックスの右上に表示されていたため、その上部はメニューバーによって非表示になりました。ウィジェット（jquery-uiバージョン1.11.4）を非常に簡単に配置した方法は次のとおりです（「ui-datepicker」はjquery-uiによって指定されたクラス名であることに注意してください）。

$(document).ready(function() {
$(".ui-datepicker").css('margin-left', '-50px', 'margin-top', '-50px');
//... 
}
于 2015-06-25T15:56:26.370 に答える