web-dev-qa-db-ja.com

配置Angular UI bootstrap Datepicker

Angularjs uiの日付ピッカーで「小さな」問題が発生しています。何らかの方法で示す必要があります。日付ピッカーがアタッチされた入力の場合、入力の左下隅からポップアップを表示する必要があります（デフォルト）

enter image description here

または、代わりに入力の右下隅から取得したい場合。これは、作成しているページでは、入力がページの右側に非常に近く、日付ピッカーをアタッチすると、これが発生するためです（日付ピッカーが切り取られ、水平スクロールが表示されます）。

enter image description here

しかし、問題は両方の位置に日付ピッカーが必要であることです（画像に関連するケースによると）。

誰かがこれをどのように修正できるか知っていますか？ datepickerポップアップテンプレートでインラインであるleft属性を変更しようとしましたが、これは常に固定値であり、実際のオプションではないと考えました。

ありがとう

angularjsdatepickerangular-ui-bootstrap
21
abottoni

一般的なソリューションを実装する場合、これはdatepicker-popupのテンプレートを変更するだけでは達成できないことです。

ディレクティブ内のupdatePosition関数を変更して、scope.position.leftが次のようになるようにする必要があります。

 scope.position.left += scope.position.width - $position.position(popupEl).width;

しかし、ここでも、popuElの幅が表示された後に必ず「読み取る」必要があります。そうしないと、ゼロになります。また、別のモード（月または年の選択）に移動すると、ポップアップの幅が変更される場合がありますが、位置は更新されません。

この機能は1行または2行の変更ではないと言いたいだけです。おそらく、このリクエストを https://github.com/angular-ui/bootstrap/issues?state=で開くことをお勧めします。 open 誰かがこれをさらに調査することをいとわないかもしれません！

3
bekos

https://github.com/angular-ui/bootstrap/issues/1012

醜いハック：

<div class="hackyhack">
  <input datepicker-popup="...">
</div>

マジックCSS：

.hackyhack {
  position: relative;
}
.hackyhack .dropdown-menu {
   left: auto !important;
   right: 0px;
 }
22
lincolnge

現在、angular-ui 1.2.0以降の最新バージョンにはpopup-placement uib-datepicker-popup設定のオプション。

ドキュメントからの簡単な要約。

popup-placement（デフォルト：auto bottom-left、Config： 'placement'）-プレースメントが有効になる前にスペースで区切られた 'auto'を渡す自動配置。例：「自動左下」。ポップアップは、最も近いスクロール可能な祖先に収まる位置に配置しようとします。受け入れる：

top-上部にポップアップし、入力要素の水平方向の中央に配置します。

top-left-上部のポップアップ、左側のエッジは入力要素の左側のエッジに揃えられます。

top-right-上部のポップアップ、右端、入力要素の右端に揃えます。

bottom-下部にポップアップし、入力要素の水平方向の中央に配置します。

bottom-left-下のポップアップ、左端、入力要素の左端に揃えます。

bottom-right-下部のポップアップ、右端、入力要素の右端に揃えます。

left-左側にポップアップ、入力要素の垂直方向中央に配置。

left-top-左上のポップアップ、上端は入力要素の上端に揃えられます。

left-bottom-左側のポップアップ、下端は入力要素の下端に揃えられます。

right-右側にポップアップし、入力要素の垂直方向の中央に配置します。

right-top-右側のポップアップ、上部の端は入力要素の上部の端に揃えられます。

right-bottom-右下のポップアップを入力要素の下端に揃えて配置します。

あなたの場合、私はbottom-right 働くでしょう。

詳細は this plunker を試してください。

7
vinesh

このCSSソリューションは、angular .jsファイルを変更/ハッキングするよりも簡単な場合があります。

日付ピッカーをdivでラップし、日付ピッカーの.dropdown-menuクラスのマージンCSSをオーバーライドします。

<div id="adjust-left">
   <your-datepicker-here/>
<div>

次に、CSSで：

#adjust-left .dropdown-menu{
    /* Original value: margin: 2px 0 0; */
    margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */
}
5
ForCripeSake

ええ、私は上記のように自分のangular-ui.0.7.0.tpls.jsファイルをハッキングしましたが、それはかなりうまくいきました：

function updatePosition() {
    scope.position = appendToBody ? $position.offset(element) : $position.position(element);
    scope.position.top = scope.position.top + element.prop('offsetHeight');

    var padding = 20; //min distance away from right side
    var width = popupEl.outerWidth(true);
    var widthOver =  $('body').outerWidth(true) - (scope.position.left + width + padding);

    if(widthOver < 0) {
        scope.position.left = scope.position.left + widthOver;
    }
}
3
John David Five