web-dev-qa-db-ja.com

jQuery UIの日付ピッカーを常に特定の方向に開くようにしますか？

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

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

jquery-uijquery-ui-datepicker
15
ceejayoz

行を変更できます：

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;

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

6
Kev

（jQueryUIバージョンのdatepickerの場合）確実にする唯一の方法は、ビューポート内でレンダリングしようとするdatepickerの機能を無効にすることです。ソースコードファイルを変更せずにそれを行う方法は次のとおりです。

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

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

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

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

19
Purrell

問題は、その要素が位置にあることです：show top position 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>
10
jmav

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

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

3
Aseem

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

これが私がしたことです。それは確かにクルーゲですが、それは機能するので、他の誰かを助けるかもしれないと思いました。うまくいけば、将来的にはjquerydatepickerが位置オプションを追加するでしょう。

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);
}
1
SemanticZen

ドキュメントから、datepickerプラグインの 'dialog'メソッド を使用して目的の結果を達成できる可能性があるようです。ただし、これを使用することは、日付を抽出するためのコールバックハンドラーなど、他の方法ではdatepickerですぐに使用できる接着剤の一部を実装する必要があることを意味します。

コードをモックアップして動作を確認しようとしましたが、日付ピッカーを表示することはできませんでしたが、完全に機能させることはできませんでした。とにかく、私よりも運が良ければ、それを指摘したいと思います。

0
Joe Holloway