angularjs - ngbdatepicker - ui bootstrap tpls 2.5 0

Posicionamiento Angular UI bootstrap Selector de fecha

Question

Estoy teniendo un "pequeño" problema con el selector de fechas angularjs ui. Necesito indicar de alguna manera, si una entrada con un adjuntador de selección de fecha debe mostrar la ventana emergente desde la esquina inferior izquierda de la entrada (como predeterminada)

o si lo quiero desde la esquina inferior derecha de la entrada en su lugar. Esto se debe a que en una página que estoy creando, mi entrada está muy cerca del lado derecho de la página, y cuando adjunto el selector de fecha, esto sucede (el selector de fecha se corta y ahora aparece un desplazamiento horizontal):

pero la cosa es que necesito el selector de fecha en ambas posiciones (según el caso relacionado en las imágenes).

Alguien sabe cómo se puede arreglar esto? He intentado cambiar el atributo left que está en línea en la plantilla emergente del selector de fecha, pero siempre es un valor fijo y creo que no es la opción real.

Gracias

Answer 1

Ahora, las últimas versiones de angular-ui 1.2.0 en adelante tienen popup-placement opción de popup-placement emergente en la configuración de uib-datepicker-popup.

Un resumen rápido de los documentos.

emergente-ubicación (Predeterminado: auto abajo a la izquierda, Config: ''emplazamiento''): pasar "auto" separado por un espacio antes de la colocación habilitará el posicionamiento automático, por ejemplo: "auto abajo a la izquierda". La ventana emergente intentará ubicarse donde encaja en el antepasado desplazable más cercano. Acepta:

arriba : ventana emergente en la parte superior, centrada horizontalmente en el elemento de entrada.

arriba a la izquierda : ventana emergente en la parte superior, borde izquierdo alineado con el elemento de entrada borde izquierdo.

arriba a la derecha : ventana emergente en el borde superior derecho alineado con el borde derecho del elemento de entrada.

abajo : ventana emergente en la parte inferior, centrada horizontalmente en el elemento de entrada.

parte inferior izquierda : ventana emergente en la parte inferior, borde izquierdo alineado con el elemento de entrada borde izquierdo.

abajo a la derecha : ventana emergente en la parte inferior, borde derecho alineado con el borde derecho del elemento de entrada.

izquierda : ventana emergente a la izquierda, centrada verticalmente en el elemento de entrada.

izquierda superior : ventana emergente en el borde superior izquierdo alineado con el borde superior del elemento de entrada.

izquierda-abajo : ventana emergente en el borde inferior izquierdo alineado con el borde inferior del elemento de entrada.

derecha : ventana emergente a la derecha, centrada verticalmente en el elemento de entrada.

parte superior derecha : ventana emergente en el borde superior derecho alineado con el borde superior del elemento de entrada.

parte inferior derecha : ventana emergente en el borde inferior derecho alineado con el borde inferior del elemento de entrada.

En su caso, creo que la bottom-right funcionará.

Juega con este plunker para más detalles.

Answer 2

Esta solución CSS puede ser más simple que alterar / hackear sus archivos .js angulares:

Envuelva su selector de fechas en un div y luego anule el margen de CSS de la clase .dropdown-menu del selector de fechas:

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

Luego, en el 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 */
}

Answer 3

Sí, hackeé mi archivo angular-ui.0.7.0.tpls.js como se describe anteriormente y funcionó bastante bien:

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;
    }
}

Answer 4

Si desea implementar una solución general, esto es algo que no se puede lograr simplemente modificando la plantilla del elemento datepicker-popup .

Tienes que cambiar la función updatePosition dentro de la directiva, de modo que scope.position.left igual a algo como esto:

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

Pero una vez más, debe asegurarse de que "lea" el ancho del popuEl después de que esté visible, de lo contrario obtendrá cero. Además, si va a otro modo (selección de mes o año), la posición no se actualiza aunque el ancho de la ventana emergente puede cambiar.

Solo quiero decir que esta característica no es un cambio de una o dos líneas, y probablemente es mejor abrir una solicitud para esto en https://github.com/angular-ui/bootstrap/issues?state=open Puede que alguien esté dispuesto a investigar esto más lejos!

Answer 5

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

Truco feo:

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

CSS mágico:

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