15

position: fixedページ下部のツールバーでjQueryUIのdatepickerコントロールを使用しています。ランダムなコンピューターでは、ツールバーの下に日付ピッカーが表示されることがあります。これは、ページから外れていて、表示したり操作したりできないことを意味します。

日付ピッカーコントロールの位置を常にその右上に強制する方法はあり<input>ますか？

4

6 に答える 6

19

(日付ピッカーの jQueryUI バージョンの場合) 確認する唯一の方法は、ビューポート内でレンダリングを試みる日付ピッカーの機能を無効にすることです。ソースコードファイルを変更せずにそれを行う方法は次のとおりです。

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

それ以降のバージョンの JQuery UI では、次を試してください。

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

これは、datepicker 内の _checkOffset 関数を無効にするだけで、それがリスニングになります。次に、 .ui-datepicker css を使用して、それが目的の場合に修正されたままであることを確認できます。詳細については、how-to-control-positioning-of-jqueryui-datepicker を参照してください。

于 2009-11-30T22:36:42.407 に答える
10

問題は、その要素が正しい位置にあることです: 表示の上部位置 0px を修正しました (次で確認してください: alert$('#datepicker2').position())。

解決：

$('#datepicker').datepicker( {beforeShow: function(input) {
    var x = 100; //add offset
    var y = 20; 
    field = $(input);
    left = field.position().left + x;
    bottom = y;
    setTimeout(function(){
        $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});      
    },1);                    
}}

HTML のテスト:

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
  <label>
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
  </label>
</form>
于 2009-10-30T01:20:44.413 に答える
6

行を変更できます：

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;

...読むには：

offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;

ただし、これでは柔軟性が失われます。入力がたまたまページの上部にある場合、以前とは逆の問題が発生します。

于 2009-10-27T18:36:47.430 に答える
3

http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php

これをチェックして。私はこれを使用し、すべてのブラウザーで日付ピッカー コントロールを配置することができました。

于 2011-08-01T20:08:06.643 に答える
1

同様の問題がありました。ページ上のさまざまな場所で使用される可能性のある日付ピッカーを含むページがありますが、ユーザーが固定ヘッダーを固定したまま水平方向と垂直方向の両方でページをスクロールできる固定ヘッダーでも使用できます。ヘッダーには日付ピッカーもあります。したがって、datepicker のグローバルな変更を行うことはできません。

これが私がしたことです。それは確かにクルーゲですが、うまくいくので、他の誰かを助けるかもしれないと思いました. 将来的には、jquery datepicker に位置オプションが追加されることを願っています。

beforeShow: function(input, inst) {
    $("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none" );

    window.setTimeout(function() { 
        var leftPosition = parseInt($(window).width() / 2);
        $("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition });
        $("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit" );
    }, 500);
}
于 2012-05-06T07:55:59.590 に答える
0

ドキュメントから、datepicker プラグインの「ダイアログ」メソッドを使用して、目的の結果を達成できるように見えます。ただし、これを使用すると、日付を抽出するためのコールバック ハンドラなど、datepicker ですぐに使用できる接着剤の一部を実装する必要がある可能性が高くなります。

私はいくつかのコードをモックアップして動作を確認しようとしましたが、日付ピッカーを表示するまでには至りませんでしたが、うまく動作しませんでした。とにかく、あなたが私よりも運が良かった場合に備えて、それを指摘したかった.

于 2009-10-28T22:45:39.653 に答える