web-dev-qa-db-ja.com

jQuery DatePickerコントロールのポップアップ位置を変更する方法

DatePickerを関連するテキストボックスのすぐ下ではなく最後に表示する方法はありますか？起こりがちなのは、テキストボックスがページの下部にあり、DatePickerがそれを考慮して上に移動し、テキストボックスを完全に覆うことです。ユーザーが日付を選択する代わりに入力したい場合は、入力できません。テキストボックスの直後に表示されるようにしたいので、垂直方向の調整方法は関係ありません。

ポジショニングを制御する方法はありますか？ウィジェットの設定が表示されず、CSS設定を調整する運もありませんでしたが、何かが簡単に見つからない可能性があります。

javascriptjqueryjquery-uijquery-ui-datepicker
103
gfrizzle

この質問に対する受け入れられた答えは、実際にはjQuery UI Datepickerに対するものではありません。 jQuery UI Datepickerの位置を変更するには、cssファイルの.ui-datepickerを変更するだけです。 Datepickerのサイズもこの方法で変更できます。フォントサイズを調整するだけです。

23
jonmc12

私が使用しているものは次のとおりです。

$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
    }
});

また、入力フィールドに対して右にならないように、左マージンにもう少し追加することもできます。

117
Sean CH

私はCSSで直接それを行います：

.ui-datepicker { 
  margin-left: 100px;
  z-index: 1000;
}

日付入力フィールドはすべて100ピクセル幅です。また、カレンダーがAJAXポップアップの上にも表示されるように、z-indexを追加しました。

Jquery-ui CSSファイルは変更しません。メインCSSファイルのクラスをオーバーロードするため、特定のMODを再入力せずにテーマを変更したり、ウィジェットを更新したりできます。

38
Christian Lescuyer

ここに、Datepickerカレンダーの調整のバリエーションがあります。

JQuery UI Position utilを使用してポジショニングを制御できるので、かなりいいと思います。

1つの制限：jquery.ui.position.jsが必要です。

コード：

$('input[name=date]').datepicker({
    beforeShow: function(input, inst) {
        // Handle calendar position before showing it.
        // It's not supported by Datepicker itself (for now) so we need to use its internal variables.
        var calendar = inst.dpDiv;

        // Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20)
        setTimeout(function() {
            calendar.position({
                my: 'right top',
                at: 'right bottom',
                collision: 'none',
                of: input
            });
        }, 1);
    }
})
32
Rost

私にとってはうまく機能する別のバリ​​エーションがあります。rect.top+ 40、rect.left + 0をニーズに合わせて調整します。

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'mm/dd/yy',
    beforeShow: function (input, inst) {
        var rect = input.getBoundingClientRect();
        setTimeout(function () {
                inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
        }, 0);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<form>
<input class="datepicker" name="date1" type="text">
<input class="datepicker" name="date2" type="text">
</form>
26
Patrick

これは私のために働く：

 beforeShow: function(input, inst) {
     var cal = inst.dpDiv;
     var top  = $(this).offset().top + $(this).outerHeight();
     var left = $(this).offset().left;
     setTimeout(function() {
        cal.css({
            'top' : top,
            'left': left
        });
     }, 10);
16
David Laberge

まず、datepickerオブジェクトにafterShowingメソッドが必要だと思います。jQueryが_showDatepickerメソッドですべてのブードゥーを実行した後、位置を変更できます。さらに、preferedPositionと呼ばれるパラメーターも望ましいので、ダイアログがビューポートの外部でレンダリングされる場合に設定し、jqueryで変更できます。

この最後のことを行う「トリック」があります。 _showDatepickerメソッドを学習すると、プライベート変数$.datepikcer._posの使用がわかります。その変数は、以前に誰も設定していない場合に設定されます。ダイアログを表示する前にその変数を変更すると、Jqueryはそれを取得し、その位置にダイアログを割り当てようとします。画面外にレンダリングされる場合は、表示されるように調整します。いいですね。

問題は_posはプライベートですが、気にしない場合は。あなたはできる：

$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        $.datepicker._pos = $.datepicker._findPos(input); //this is the default position
        $.datepicker._pos[0] = whatever; //left
        $.datepicker._pos[1] = whatever; //top
    }
});

ただし、_showDatepickerの内部実装を変更するとコードが破損する可能性があるため、Jquery-uiの更新には注意してください。

6
monzonj

ボーダレス入力コントロールが存在する親divに従って、datepickerを配置する必要がありました。そのために、jquery UIコアに含まれる「位置」ユーティリティを使用しました。 beforeShowイベントでこれを行いました。前述のとおり、dateShowのコードはbeforeShow関数の終了後に位置をリセットするため、beforeShowで直接位置を設定することはできません。それを回避するには、単にsetIntervalを使用して位置を設定します。現在のスクリプトが完了し、日付ピッカーが表示され、日付ピッカーが表示された直後に再配置コードが実行されます。決して発生することはありませんが、.5秒後に日付ピッカーが表示されない場合、コードには間隔をあきらめてクリアするフェールセーフがあります。

        beforeShow: function(a, b) {
            var cnt = 0;
            var interval = setInterval(function() {
                cnt++;
                if (b.dpDiv.is(":visible")) {
                    var parent = b.input.closest("div");
                    b.dpDiv.position({ my: "left top", at: "left bottom", of: parent });
                    clearInterval(interval);
                } else if (cnt > 50) {
                    clearInterval(interval);
                }
            }, 10);
        }
3
Brett Birschbach

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

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});
2
anubiskong

カスタムjqueryコードで修正しました。

  1. datepicker入力フィールドにクラス「。datepicker2 "

  2. 現在の位置を上から見つけて、

  3. クラス名が「。ui-datepicker」であるポップアップボックスを配置しました

これが私のコードです。

$('.datepicker2').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

ここで「40」は私の予想ピクセルであり、あなたはあなたと変更することができます。

2
sh6210

（（ jQueryUI datepickerの配置を制御する方法 ））

$ .extend（$。datepicker、{_checkOffset：function（inst、offset、isFixed）{return offset}}）;

できます ！！！

1
masoud Cheragee

表示位置の問題を修正daterangepicker.jQuery.js

//Original Code
//show, hide, or toggle rangepicker
    function showRP() {
        if (rp.data('state') == 'closed') {
            rp.data('state', 'open');
            rp.fadeIn(300);
            options.onOpen();
        }
    }


//Fixed
//show, hide, or toggle rangepicker
    function showRP() {
        rp.parent().css('left', rangeInput.offset().left);
        rp.parent().css('top', rangeInput.offset().top + rangeInput.outerHeight());
        if (rp.data('state') == 'closed') {
            rp.data('state', 'open');
            rp.fadeIn(300);
            options.onOpen();
        }
    }
1
zersina

クラス名をui-datepicker-triggerに変更しました

したがって、これはjquery 1.11.xで機能します

.ui-datepicker-trigger { 
margin-top:7px;
  margin-left: -30px;
  margin-bottom:0px;
  position:absolute;
  z-index:1000;
}
1
Marc

非常に単純なjquery関数。

$(".datepicker").focus(function(event){
                var dim = $(this).offset();
                $("#ui-datepicker-div").offset({
                    top     :   dim.top - 180,
                    left    :   dim.left + 150
                });
            });
1
Harry

私が開発している新しいサイトのいくつかのページでこの問題を解明しようとしてとんでもない時間を費やしましたが、何も機能していないようでした（実装した上記のさまざまなソリューションを含みます。jQueryは変更されたばかりです解決策がもう機能しないことが示唆されたので、十分なことをしました。正直なところ、jQuery uiにこれを設定するために実装された単純なものがない理由がわかりません。カレンダーに関するかなり大きな問題は、それが接続されている入力からページのかなり下のある位置で常にポップアップします。

とにかく、どこでも使用できて機能するような汎用性の高い最終ソリューションが必要でした。私は最終的に、上記のより複雑でjQueryコード固有の回答のいくつかを回避する結論に達したようです。

jsFiddle： http://jsfiddle.net/mu27tLen/

HTML：

<input type="text" class="datePicker" />

JS：

positionDatePicker= function(cssToAdd) {
    /* Remove previous positioner */
    var oldScript= document.getElementById('datePickerPosition');
    if(oldScript) oldScript.parentNode.removeChild(oldScript);
    /* Create new positioner */
    var newStyle= document.createElement("style");
    newStyle.type= 'text/css';
    newStyle.setAttribute('id', 'datePickerPostion');
    if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
    else newStyle.appendChild(document.createTextNode(cssToAdd));
    document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
    /* Initialize date picker elements */
    var dateInputs= jQuery('input.datePicker');
    dateInputs.datepicker();
    dateInputs.datepicker('option', {
        'dateFormat' : 'mm/dd/yy',
        'beforeShow' : function(input, inst) {
            var bodyRect= document.body.getBoundingClientRect();
            var rect= input.getBoundingClientRect();
            positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
        }
    }).datepicker('setDate', new Date());
});

基本的に、すべての日付ピッカーの「show」イベントの前に、新しいスタイルタグをヘッドに添​​付します（前のイベントが存在する場合は削除します）。この方法で、開発中に遭遇した問題の大部分を回避できます。

Chrome、Firefox、Safari、およびIE> 8でテスト済み（IE8はjsFiddleでうまく動作せず、気遣うことに対する喜びを失っています）

これはjQueryコンテキストとjavascriptコンテキストが混在していることを知っていますが、現時点ではjQueryに変換する努力をしたくありません。簡単でしょう、私は知っています。私は今、このことでとても終わりました。他の誰かがこのソリューションの恩恵を受けることを願っています。

1
Programmer Dan

IEがquirksモードになった場合、jQuery UIコンポーネントおよびその他の要素が正しく配置されないことにも注意してください。

互換モードに陥らないようにするには、Doctypeを最新のHTML5に正しく設定してください。

<!DOCTYPE html>

トランジショナルを使用すると、混乱が生じます。これが将来誰かを救うことを願っています。

0
Halfstop
$('.PDatePicker').MdPersianDateTimePicker({
                Placement: 'top',          
            });
0
hamed hossani

または、dateSelectオブジェクトでフォーカスイベントを使用し、APIを一緒に配置できます。上下左右を入れ替えて、右または中央に配置することができます（または、位置APIから実際に必要なものすべて）。この方法では、間隔やめちゃくちゃ複雑なソリューションを必要とせず、入力の場所に応じてニーズに合わせてレイアウトを構成できます。

dateSelect.focus(function () {
    $("#ui-datepicker-div").position({
        my: "left top",
        at: "left bottom",
        of: $(this)
    });
});
0
Taugenichts

これにより、functionという名前のメソッドに機能が追加され、コードでカプセル化したり、メソッドをjquery拡張機能にしたりできます。私のコードで使用しただけで、完璧に動作します

var nOffsetTop  = /* whatever value, set from wherever */;
var nOffsetLeft = /* whatever value, set from wherever */;

$(input).datepicker
(
   beforeShow : function(oInput, oInst) 
   { 
      AlterPostion(oInput, oInst, nOffsetTop, nOffsetLeft); 
   }
);

/* can be converted to extension, or whatever*/
var AlterPosition = function(oInput, oItst, nOffsetTop, nOffsetLeft)
{
   var divContainer = oInst.dpDiv;
   var oElem        = $(this);
       oInput       = $(oInput);

   setTimeout(function() 
   { 
      divContainer.css
      ({ 
         top  : (nOffsetTop >= 0 ? "+=" + nOffsetTop : "-=" + (nOffsetTop * -1)), 
         left : (nOffsetTop >= 0 ? "+=" + nOffsetLeft : "-=" + (nOffsetLeft * -1))
      }); 
   }, 10);
}
0
Brett Weber

Jquery.UI内で、_checkOffset関数を更新するだけで、offsetが返される前にviewHeightがoffset.topに追加されます。

_checkOffset: function(inst, offset, isFixed) {
    var dpWidth = inst.dpDiv.outerWidth(),
    dpHeight = inst.dpDiv.outerHeight(),
    inputWidth = inst.input ? inst.input.outerWidth() : 0,
    inputHeight = inst.input ? inst.input.outerHeight() : 0,
    viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()),
            viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));
        offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
        offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
        offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;

        // now check if datepicker is showing outside window viewport - move to a better place if so.
        offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
            Math.abs(offset.left + dpWidth - viewWidth) : 0);
        offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
            Math.abs(dpHeight + inputHeight) : 0);
**offset.top = offset.top + viewHeight;**
        return offset;
    },
0
David Moore
.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}
0
James