El datepicker en jQueryUI hace con una posición dinámica. Se hace de acuerdo a su css si no hay espacio suficiente para ello, pero si no hay suficiente espacio de la ventana se intenta representar en la pantalla. La necesito para quedarse y que se represente en el mismo lugar todo el tiempo, independiente de la posición de la pantalla o de otras circunstancias. Cómo se puede hacer esto con el jQueryUI datepicker? Otras implementaciones de jQuery datepicker parecen haber maneras de hacer esto, pero no veo la manera de hacerlo para la versión de IU.

La respuesta parece ser que no acaba de modificar el css:

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

…desde cuando el selector de fechas que se crea que se crea dinámicamente arriba y a la izquierda en el elemento de estilo. No he encontrado una forma de evitar esto todavía. Un enfoque que he visto es para dar algo como esto en el beforeShow opción:

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 top y left todavía están en establecer dinámicamente después de que se ejecuta cuando el selector de fecha renders. Todavía tratando de representar en la pantalla. Cómo hago para procesar siempre en el mismo lugar? Mi siguiente paso es, probablemente, para entrar en el selector de fecha tripas y empezar a tirar cosas. Alguna idea?

Nota que la respuesta (para la versión de IU) no es en:

InformationsquelleAutor Purrell | 2009-11-30

13 Comentarios

  1. 65

    Publicar esto en la esperanza de que ayudará a los demás. Al menos a partir de v1.8.1 de selector de fecha, el uso de la ventana».DP_jQuery.datepicker’ ya no funciona, porque el puntero(término correcto?) ahora se denomina con una marca de tiempo de su creación – así, por ejemplo, sería ahora de la ventana».DP_jQuery_1273700460448′. Así que ahora, en lugar de utilizar el puntero para el datepicker de objeto, consulte directamente como este:

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

    Muchas gracias por la respuesta de abajo para obtener lo que necesitaba.

    • No prob – estoy feliz de que alguien más tiene algo de esto, recuerdo que pasar una hora o dos de calcular esto.
    • Esto funciona de maravilla!
    • Bueno, realmente me ayudó! Para cualquier persona que lo necesite puede cambiar los márgenes de la datepicker como este: .ui datepicker { margin-left: -361px; }
    • No funciona para mí.
    • eeehh, tal vez una pregunta estúpida, pero ¿cómo usar esto? En beforeshow?
    • Funciona como un encanto. @JilcoTigchelaar sólo estoy haciendo la función de devolución de una compensación fija. $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){offset.top = 80; offset.left=180; return offset;}});
    • Lo siento por preguntar esto, pero ¿cómo lo uso? Para ser más específicos, donde debo poner esa línea?
    • aquí la línea});

  2. 10

    Edición: JaredC dio una respuesta actualizada con las últimas versiones de jQuery arriba. Conmutación aceptado contestar a eso.

    Bien, esto es un asunto de monkeypatching la función que ha de intentar siempre hacer en la ventanilla, ya que no hay opción para habilitar/deshabilitar la función. Por suerte, es desacoplado y aislado en una función para que podamos ir y anular la misma. El código siguiente se desactiva completamente esa característica única:

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

    _checkOffset se llama cuando es la apertura y hace los cálculos en el desplazamiento y devuelve un nuevo desplazamiento si de lo contrario podría estar fuera de la vista del puerto. Esto reemplaza el cuerpo de la función para pasar el original de desplazamiento a la derecha a través. A continuación, puede utilizar el beforeShow configuración hack y/o la .ui datepicker clase css para ponerlo donde quieras.

  3. 6

    enlazar focusin después de usar el selector de fecha
    cambiar el css de datepicker del widget
    deseo ayudar a

    $('input.date').datepicker();
    $('input.date').focusin(function(){
        $('input.date').datepicker('widget').css({left:"-=127"});
    });
    • cuando ya se ve una respuesta aceptada, ¿cuál es el punto en responder de nuevo. De todos modos, Bienvenido ENTONCES! 🙂
    • Mostrando la manera de cómo hacerlo sin un ‘hack’ es siempre un goot cosa. Aceptada la solución de (reemplazar interna ‘privado’ de la lógica de datepicker) de mayo de quiebra que arreglar con cada nueva versión de jquery.la interfaz de usuario. Mirando aceptado la respuesta es, en realidad me parece que es el caso…
  4. 3

    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);
    }
    • He encontrado esto para ser el más útil con las últimas versiones de jQuery UI
  5. 3

    El problema que tenía es que el selector de fecha está mal colocado dentro de elementos fijos, tales como fantasía/cajas de luz. Por alguna razón, el datepicker de interruptores en «fijo» de posicionamiento modo cuando esto sucede, y, a continuación, el desplazamiento de cálculo es incorrecto, cuando posicionamiento absoluto habría funcionado bien.

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

    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,
            };
        }
    });
    • Interesante. Pero, ¿cómo puedo usar esto en específico datepickers sólo? Parece que no funciona con el estándar de DPs, sólo con los que están incluidos en un cuadro de diálogo en mi caso.
    • No estoy seguro. Si usted puede obtener una instancia de la datepicker objeto, usted podría ser capaz de sobrescribir _checkOffset para esa instancia. Oh, pero este código comprueba si el selector de fechas es «fijo» o no, tal vez usted podría ajustar esa lógica para satisfacer sus necesidades.
  6. 1

    En el archivo css, por ejemplo:

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

    La configuración importantes, sean las que sean, se anulan los valores predeterminados en línea.

    • que está mal, estilos en línea siempre tienen prioridad
    • en realidad, ellos no, si de usar !importante dentro del estilo CSS. Sólo en línea estilos de tener !importante mismos pueden sobrescribir entonces el !importante procedentes de CSS jsfiddle.net/NTCP7
    • Mientras !important es un poco de CSS hack de último recurso, esta solución funciona bien y es más fácil de implementar.
    • Esta respuesta es la correcta para el problema muy específico de la posición del selector de fecha widget de calendario en una posición absoluta. La respuesta no es correcta en lo que respecta a la más general título «Cómo controlar el posicionamiento de jQueryUI datepicker?»
  7. 1

    anterior traté de darle a la parte superior, a la izquierda en beforeShow caso de datepicker.js, que es obtener reemplazar por _showDatePicker método de jquery-ui-custom.js .
    Pero después de un tiempo fuera de la ventana de su trabajo 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);
    }
    • Esta solución no es nada más que un hack. Aunque las obras en general, usted puede notar una especie de «salto» en el widget datepicker, especialmente si la posición generada por datepicker está muy lejos de su «hackeado» su posición. Este es, por supuesto, sólo en secundaria, a causa de su solución puede no funcionar en absoluto en «lento» de los equipos.
  8. 1

    Esto es una vieja pregunta, sin embargo hace poco me encontré con un problema similar a este con el jQuery UI Datepicker. Ya estábamos utilizando la solución publicado por @JaredC arriba (específicamente este fragmento de código: $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});) sin embargo no iba a funcionar para un modal que había una entrada en la que nos necesarios para representar un desplegable.

    Se produciría este problema porque cuando el desplazamiento hacia abajo de la página el offset de la entrada en el modal de los cambios en relación a la parte superior de la desplaza la página. El comportamiento resultante significaría que el datepicker haría en una diferente posición vertical dependiendo de la distancia que se desplaza la página hacia abajo (nota: si bien visible y el desplazamiento del selector de fecha ya estaba fijo). La solución a este problema («selector de fecha de entrada anidada dentro de un modal») es que en lugar de calcular la posición vertical de la entrada relativa a la vista de la pantalla y, a continuación, agregue la altura de la entrada (lo que permite el «top» de la propiedad css de el selector de fecha para ser justo debajo de la entrada).

    El siguiente fragmento de código es en coffeescript. En lugar de devolver el regular desplazamiento como por @JaredC la solución que en lugar de obtener la elementId de la entrada de la «inst» objeto y, a continuación, tener acceso al objeto a través de jquery con el fin de usarla para calcular la entrada de la distancia desde la parte superior de la pantalla en relación a la ventanilla.

    # 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;
        }
    });
    • El café está plagado de errores de sintaxis. Le mente la fijación de ellos? O mejor aún, transpiling a JS para nosotros? Editar: de Nvm, por LO que acaba de follar hasta el espaciado. Esta es la razón por la que yo odio los espacios en blanco-dependiente de idiomas. Estoy modifica su respuesta con la JS, espero que bien.
  9. 1

    La aceptó responder funciona muy bien en general.

    Sin embargo, el uso de jQuery interfaz de usuario v1.11.4, tuve un problema donde el datepicker sería colocar a sí mismo lejos de la entrada en una ventana modal (fijo posicionamiento) cuando la ventana del navegador se ha desplazado hacia abajo. Yo era capaz de solucionar este problema editando el aceptado la respuesta 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;
        }
      }
    });
  10. 1
    $("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>
  11. 1

    Esta es la forma en que funcionó para mí:

    $( "input[name='birthdate']" ).datepicker({
        beforeShow : function(input,inst){
        window.setTimeout(function () {
            $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: input });
        }, 1);
        }
    });

    Para obtener colocado en la pantalla cuando se obtiene cambia de tamaño:

    $(window).resize(function(){ $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: "input[name='birthdate']" }); });
  12. -1

    aquí es más simple solución

    var $picker = $( ".myspanclass" ).datepicker(); //span has display: inline-block
    $picker.find('.ui-datepicker').css('margin-left', '-50px');
    • Esta respuesta es incorrecta causa el hilo comenzó preguntó muy específicamente para una estática de procesamiento de ubicación. Su respuesta simplemente cambia la ubicación 50px a la izquierda.
  13. -1

    Por defecto, el calendario de la fecha del selector de visualización en la parte superior derecha de mi caja de entrada, de modo que la parte superior de la misma fue escondido por mi barra de menú. He aquí cómo he colocado el widget (jquery-ui versión 1.11.4) de forma muy sencilla (tenga en cuenta que ‘ui datepicker’ es el nombre de la clase dada por jquery-ui):

    $(document).ready(function() {
    $(".ui-datepicker").css('margin-left', '-50px', 'margin-top', '-50px');
    //... 
    }
    • Su problema, se pierde una correlación con el problema planteado de este hilo. Segundo, ¿por qué la aplicación de las propiedades css a través de JS y no a través de hojas de estilo CSS?

Dejar respuesta

Please enter your comment!
Please enter your name here