ejemplos - jquery ui

Cómo controlar el posicionamiento del jQueryUI datepicker

Question

Datepicker en jQueryUI se representa con una posición dinámica. Se renderiza de acuerdo con su CSS si hay suficiente espacio para ello, pero si no hay suficiente espacio de ventana, intenta mostrarse en la pantalla. Necesito que permanezca fijo y renderizado en el mismo lugar cada vez, independientemente de la posición de la pantalla u otras circunstancias. ¿Cómo se puede hacer esto con jQueryUI datepicker? Otras implementaciones de jQuery datepicker parecen tener formas de hacerlo, pero no veo una manera de hacerlo para la versión de UI.

La respuesta no parece ser solo modificar el CSS:

.ui-datepicker { width: 17em; padding: .2em .2em 0; (trying top/margin-top/position:relative, etc. here...)}

... desde que se creó el marcador de fecha, crea dinámicamente arriba y a la izquierda en el estilo del elemento. No he encontrado una manera de evitar esto todavía. Un enfoque que vi es dar algo como esto en la opción beforeShow:

beforeShow: function(input,inst){
                                inst.dpDiv.css({ 
                                   ''top'': input.offsetHeight+ ''px'', 
                                   ''left'':(input.offsetWidth - input.width)+ ''px''
                                               });
                                }

Esto tiene algún efecto, pero las propiedades superior e izquierda aún se establecen dinámicamente después de que se ejecuta cuando se representa el selector de fecha. Todavía está tratando de renderizar en la pantalla. ¿Cómo hago para que siempre aparezca en el mismo lugar? Mi siguiente paso es probablemente entrar en las agallas de datepicker y comenzar a sacar cosas. ¿Algunas ideas?

Tenga en cuenta que la respuesta (para la versión de UI) no está en:

• how-to-change-the-pop-up-position-of-the-jquery-datepicker-control
• change-the-position-of-jquery-ui-datepicker

Answer 1

De forma predeterminada, el calendario del selector de fecha se mostraba en la esquina superior derecha de mi cuadro de entrada, por lo que la parte superior estaba oculta en la barra de menú. He aquí cómo coloqué el widget (jquery-ui versión 1.11.4) de forma muy simple (tenga en cuenta que ''ui-datepicker'' es el nombre de clase dado por jquery-ui):

$(document).ready(function() {
$(".ui-datepicker").css(''margin-left'', ''-50px'', ''margin-top'', ''-50px'');
//... 
}

Answer 2

El problema que estaba teniendo es que el marcador de fechas está posicionado incorrectamente dentro de elementos fijos, como softy / lightboxes. Por alguna razón, el selector de fecha cambia al modo de posicionamiento "fijo" cuando esto sucede, y luego el cálculo de compensación se vuelve incorrecto, cuando el posicionamiento absoluto hubiera funcionado bien.

Sin embargo, podemos obtener la posición fija correcta con este truco:

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
    _checkOffset: function(inst, offset, isFixed) {
        if(!isFixed) {
            return checkOffset.apply(this, arguments);
        }

        let isRTL = this._get(inst, "isRTL");
        let obj = inst.input[0];

        while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
            obj = obj[isRTL ? "previousSibling" : "nextSibling"];
        }

        let rect = obj.getBoundingClientRect();

        return {
            top: rect.top,
            left: rect.left,
        };
    }
});

Answer 3

En su archivo css, por ejemplo:

#ui-datepicker-div {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
}

Su configuración importante, sean las que sean, anulará los valores predeterminados en línea.

Answer 4

Esta es una pregunta bastante antigua. Sin embargo, recientemente me encontré con un problema similar al jQuery UI Datepicker. Ya estábamos usando la solución publicada por @JaredC arriba (específicamente este fragmento de código: $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}); ) sin embargo, no funcionaría para un modal que tenía una entrada en la que necesitábamos presentar un menú desplegable.

Este problema se debe a que al desplazarse hacia abajo de la página, el desplazamiento de la entrada en el modal cambia con respecto a la parte superior de la página desplazada. El comportamiento resultante significaría que el marcador de fecha se mostraría en una posición vertical diferente dependiendo de cuánto se desplazó hacia abajo en la página (nota: mientras estaba visible y el desplazamiento del marcador de fecha ya estaba solucionado). La solución a este problema ("entrada datepicker anidada dentro de un modal") es en cambio calcular el posicionamiento vertical de la entrada relativa a la pantalla de visualización y luego agregar la altura de la entrada (permitiendo la propiedad css "superior" del datepicker a estar justo debajo de la entrada).

El siguiente fragmento está en coffeescript. En lugar de devolver el desplazamiento normal según la solución de @JaredC, obtenemos el elementoId de la entrada del objeto ''inst'' y luego accedemos al objeto a través de jquery para usarlo para calcular la distancia de la entrada desde la parte superior de la pantalla en relación con la ventana gráfica.

# CoffeeScript
$.extend( $.datepicker, { _checkOffset: (inst,offset,isFixed) ->
        offset.top = $("##{inst.id}").offset().top - $(window).scrollTop() + $("##{inst.id}")[0].getBoundingClientRect().height
        offset
    }
)

// JavaScript
$.extend($.datepicker, {
    _checkOffset: function(inst, offset, isFixed) {
        offset.top = $("#" + inst.id).offset().top - $(window).scrollTop() + $("#" + inst.id)[0].getBoundingClientRect().height;
        return offset;
    }
});

Answer 5

La respuesta aceptada funciona muy bien en general.

Sin embargo, al utilizar jQuery UI v1.11.4, tuve un problema por el cual el datepicker se posicionaría lejos de la entrada en una ventana modal (posicionamiento fijo) cuando la ventana del navegador se ha desplazado hacia abajo. Pude solucionar este problema editando la respuesta aceptada de la siguiente manera:

const checkOffset = $.datepicker._checkOffset;

$.extend($.datepicker, {
  _checkOffset: function(inst, offset, isFixed) {
    if(isFixed) {
      return checkOffset.apply(this, arguments);
    } else {
      return offset;
    }
  }
});

Answer 6

Publicar esto con la esperanza de que ayudará a otros. Al menos desde v1.8.1 de datepicker, el uso de ''window.DP_jQuery.datepicker'' ya no funciona, porque el puntero (¿término correcto?) Ahora se llama con una marca de tiempo de su creación, por lo que ahora sería ''ventana''. DP_jQuery_1273700460448 ''. Entonces, en lugar de usar el puntero al objeto datepicker, remítelo directamente a este:

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

Muchas gracias por la respuesta a continuación para obtener lo que necesitaba.

Answer 7

antes probé dando top, left en el evento beforeShow de datepicker.js, eso es sobrescrito por el método _showDatePicker de jquery-ui-custom.js. Pero después de tiempo de espera, la ventana funciona bien. A continuación está el código

beforeShow : function(input,inst) {
  var offset = js.select("#" + dpId).offset();
                        var height = js.select("#" + dpId).height();
                        var width = js.select("#" + dpId).width();
                        window.setTimeout(function () {
                              js.select(inst.dpDiv).css({ top: (offset.top + height - 185) + ''px'', left: (offset.left + width + 50) + ''px'' })
                        }, 1);
}

Answer 8

aquí hay una solución más simple

var $picker = $( ".myspanclass" ).datepicker(); // span has display: inline-block
$picker.find(''.ui-datepicker'').css(''margin-left'', ''-50px'');

Answer 9

bind focusin después de usar datepicker change css of datepicker`s widget wish help

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

Answer 10

con jQuery:

beforeShow : function(input,inst){
    var offset = $(input).offset();
    var height = $(input).height();
    window.setTimeout(function () {
        $(inst.dpDiv).css({ top: (offset.top + height) + ''px'', left:offset.left + ''px'' })
    }, 1);
}

Answer 11

Editar: JaredC dio una respuesta actualizada para las versiones posteriores de jQuery arriba. Cambiar la respuesta aceptada a eso.

Bien, esto es una cuestión de poner en parche la característica que tiene de intentar renderizar siempre en la ventana gráfica ya que no hay una opción para habilitar / deshabilitar la característica. Afortunadamente está desacoplado y aislado en una función, así que podemos entrar y anularlo. El siguiente código desactiva completamente esa característica solamente:

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

_checkOffset se invoca cuando se abre y realiza cálculos en el desplazamiento y devuelve un nuevo desplazamiento si fuera de otro modo fuera del puerto de visualización. Esto reemplaza el cuerpo de la función para pasar el desplazamiento original a la derecha. Luego puede usar el hack de configuración beforeShow y / o la clase .ui-datepicker css para colocarlo donde desee.

Answer 12

$("first-selector").datepicker().bind(''click'',function () {
      $("#ui-datepicker-div").appendTo("other-selector");
});

<style>
#ui-datepicker-div {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        z-index: 99999999 !important;
}
</style>