118

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

ポジショニングを制御する方法はありますか？ウィジェットの設定が見当たりませんでしたし、CSS 設定を微調整する運もありませんでしたが、簡単に何かが欠けている可能性があります。

4

22 に答える 22

124

これが私が使用しているものです：

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

また、左余白にもう少し追加して、入力フィールドにぶつからないようにすることもできます。

于 2009-07-24T22:44:00.403 に答える
33

これは私にとってうまくいく別のバリエーションです。ニーズに合わせて 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>

于 2015-01-19T21:39:30.937 に答える
18

これは私のために働く：

beforeShow: function(input, inst) {
    var $this = $(this);
    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);
}
于 2012-08-23T18:32:45.597 に答える
8

afterShowing最初に、datepicker オブジェクトにメソッドが必要だと思います。ここでは、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
    }
});

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

于 2011-06-29T10:47:30.013 に答える
4

ボーダレス入力コントロールが存在する親 div に従って、日付ピッカーを配置する必要がありました。そのために、jquery UI コアに含まれている「position」ユーティリティを使用しました。これは beforeShow イベントで行いました。他の人が上でコメントしたように、beforeShow関数の終了後にdatepickerコードが場所をリセットするため、beforeShowで位置を直接設定することはできません。これを回避するには、setInterval を使用して位置を設定するだけです。現在のスクリプトが完了し、datepicker が表示され、datepicker が表示された直後に再配置コードが実行されます。決して起こらないはずですが、datepicker が 0.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);
        }
于 2011-09-01T05:26:12.837 に答える
3

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

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

私が開発している新しいサイトのいくつかのページでこの問題を解決しようとして途方もない時間を費やしましたが、何もうまくいかないようでした (私が実装した上記のさまざまなソリューションのいずれも含みます。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());
});

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

Chrome、Firefox、Safari、および IE > 8 でテスト済み (IE8 は jsFiddle でうまく動作せず、気にする気力を失っているため)

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

于 2014-12-19T16:50:43.460 に答える
1

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

したがって、これはjquery 1.11.x

.ui-datepicker-trigger { 
margin-top:7px;
  margin-left: -30px;
  margin-bottom:0px;
  position:absolute;
  z-index:1000;
}
于 2015-03-21T22:55:49.590 に答える
1

表示位置の問題を修正 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();
        }
    }
于 2012-06-28T08:45:55.880 に答える
0 
.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}
于 2015-01-08T16:25:26.277 に答える
0

ここに別の解決策があります。

  1. 位置を固定する関数を作成する

     function setDatepickerPos(input, inst) {
 var rect = input.getBoundingClientRect();
 // use 'setTimeout' to prevent effect overridden by other scripts
 setTimeout(function () {
     var scrollTop = $("body").scrollTop();
     inst.dpDiv.css({ top: rect.top + input.offsetHeight + scrollTop });
 }, 0);}

  2. datepicker の「beforeShow」プロパティに関数を追加します

     $('#MyDatepicker').datepicker({
 dateFormat: "yy-mm-dd",
 changeMonth: true,
 changeYear: true,
 defaultDate: +0,
 inline: true,
 beforeShow: function (input, inst) { setDatepickerPos(input, inst) },});

参照リンクは次のとおりです: link。すべてのクレジットはAries.meに送信する必要があります

于 2022-01-31T10:57:58.817 に答える