javascript - problem - jquery ui datepicker es js

Cómo cambiar la posición emergente del control jQuery DatePicker

Question

¿Alguna idea de cómo hacer que DatePicker aparezca al final del cuadro de texto asociado en lugar de directamente debajo de él? Lo que suele ocurrir es que el cuadro de texto está hacia la parte inferior de la página y DatePicker se desplaza hacia arriba para dar cuenta y cubre por completo el cuadro de texto. Si el usuario desea escribir la fecha en lugar de elegirla, no puede. Prefiero que aparezca justo después del cuadro de texto, por lo que no importa cómo se ajuste verticalmente.

¿Alguna idea de cómo controlar el posicionamiento? No vi ninguna configuración para el widget, y no tuve mucha suerte modificando la configuración de CSS, pero fácilmente podría perder algo.

Answer 1

Aquí es suficiente para:

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

Answer 2

Aquí está mi variación de la alineación del calendario de Datepicker.

Creo que es bastante bueno, porque puedes controlar el posicionamiento a través de la utilidad de posición jQuery UI.

Una restricción: se requiere jquery.ui.position.js.

Código:

$(''input[name=date]'').datepicker({
beforeShow: function(input, inst) {
// Handle calendar position before showing it.
// It''s not supported by Datepicker itself (for now) so we need to use its internal variables.
var calendar = inst.dpDiv;
// Dirty hack, but we can''t do anything without it (for now, in jQuery UI 1.8.20)
setTimeout(function() {
calendar.position({
my: ''right top'',
at: ''right bottom'',
collision: ''none'',
of: input
});
}, 1);
}
})

Answer 3

Aquí hay otra variación que funciona bien para mí, ajuste el rect.top + 40, rect.left + 0 para satisfacer sus necesidades:

$(".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>

Answer 4

Cambiaron el nombre de clase a ui-datepicker-trigger

Entonces esto funciona en jquery 1.11.x

.ui-datepicker-trigger {
margin-top:7px;
margin-left: -30px;
margin-bottom:0px;
position:absolute;
z-index:1000;
}

Answer 5

Dentro de Jquery.UI, simplemente actualice la función _checkOffset, para que viewHeight se agregue a offset.top, antes de que se devuelva el desplazamiento.

_checkOffset: function(inst, offset, isFixed) {
var dpWidth = inst.dpDiv.outerWidth(),
dpHeight = inst.dpDiv.outerHeight(),
inputWidth = inst.input ? inst.input.outerWidth() : 0,
inputHeight = inst.input ? inst.input.outerHeight() : 0,
viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()),
viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));
offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;
// now check if datepicker is showing outside window viewport - move to a better place if so.
offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
Math.abs(offset.left + dpWidth - viewWidth) : 0);
offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
Math.abs(dpHeight + inputHeight) : 0);
**offset.top = offset.top + viewHeight;**
return offset;
},

Answer 6

Esto es lo que estoy usando:

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

También es posible que desee agregar un poco más al margen izquierdo, por lo que no está alineado con el campo de entrada.

Answer 7

Esto funciona para mí:

 beforeShow: function(input, inst) {
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);

Answer 8

Esto pone la funcionalidad en un método llamado función, permitiendo que su código lo encapsule o que el método se convierta en una extensión jquery. Solo usado en mi código, funciona perfectamente

var nOffsetTop = /* whatever value, set from wherever */;
var nOffsetLeft = /* whatever value, set from wherever */;
$(input).datepicker
(
beforeShow : function(oInput, oInst)
{
AlterPostion(oInput, oInst, nOffsetTop, nOffsetLeft);
}
);
/* can be converted to extension, or whatever*/
var AlterPosition = function(oInput, oItst, nOffsetTop, nOffsetLeft)
{
var divContainer = oInst.dpDiv;
var oElem = $(this);
oInput = $(oInput);
setTimeout(function()
{
divContainer.css
({
top : (nOffsetTop >= 0 ? "+=" + nOffsetTop : "-=" + (nOffsetTop * -1)),
left : (nOffsetTop >= 0 ? "+=" + nOffsetLeft : "-=" + (nOffsetLeft * -1))
});
}, 10);
}

Answer 9

La respuesta aceptada para esta pregunta no es en realidad para jQuery UI Datepicker. Para cambiar la posición de jQuery UI Datepicker, simplemente modifique .ui-datepicker en el archivo css. El tamaño del Datepicker también se puede cambiar de esta manera, simplemente ajuste el tamaño de la fuente.

Answer 10

Lo arreglé con mi código jquery personalizado.

1. le dio a mi campo de entrada datepicker una clase " .datepicker2 "

2. encontrar su posición actual desde arriba y

3. posicionó el cuadro emergente, cuyo nombre de clase es " .ui-datepicker "

aquí está mi código

$(''.datepicker2'').click(function(){
var popup =$(this).offset();
var popupTop = popup.top - 40;
$(''.ui-datepicker'').css({
''top'' : popupTop
});
});

aquí "40" es mi píxel esperado, puede cambiar con el suyo.

Answer 11

Lo hago directamente en el CSS:

.ui-datepicker {
margin-left: 100px;
z-index: 1000;
}

Mis campos de entrada de fecha son todos de 100 px de ancho. También agregué el índice z para que el calendario también aparezca encima de las ventanas emergentes de AJAX.

No modifico el archivo CSS jquery-ui; Sobrecargo la clase en mi archivo CSS principal, por lo que puedo cambiar el tema o actualizar el widget sin tener que volver a introducir mis modificaciones específicas.

Answer 12

Lo tomé de (( Cómo controlar el posicionamiento de jQueryUI datepicker ))

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

funciona !!!

Answer 13

Necesitaba colocar el marcador de fecha de acuerdo con un div principal dentro del cual residía mi control de entrada sin bordes. Para hacerlo, utilicé la utilidad de "posición" incluida en el núcleo de jQry UI. Hice esto en el evento beforeShow. Como otros comentaron anteriormente, no puede establecer la posición directamente en beforeShow, ya que el código datepicker restablecerá la ubicación después de finalizar la función beforeShow. Para evitar eso, simplemente establece la posición usando setInterval. La secuencia de comandos actual se completará, mostrando el marcador de fecha, y luego el código de reposicionamiento se ejecutará inmediatamente después de que el selector de fecha esté visible. Aunque nunca debería suceder, si el marcador de fecha no es visible después de .5 segundos, el código tiene una falla de seguridad para renunciar y borrar el intervalo.

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

Answer 14

Pasé una cantidad ridícula de tiempo tratando de resolver este problema para varias páginas de un nuevo sitio que estoy desarrollando y nada parecía funcionar (incluyendo cualquiera de las varias soluciones presentadas anteriormente que implementé. Supongo que jQuery acaba de cambiar las cosas lo suficiente, ya que se sugirieron que las soluciones no funcionan más. No sé. Honestamente, no entiendo por qué no hay algo simple implementado en el jQuery ui para configurar esto, ya que parece ser un problema bastante grande con el calendario siempre apareciendo en alguna posición considerablemente más abajo en la página de la entrada a la que está adjuntado.

De todos modos, quería una solución final que fuera lo suficientemente genérica como para poder usarla en cualquier lugar y funcionaría. Parece que finalmente llegué a una conclusión que evita algunas de las respuestas más complicadas y específicas del código jQuery anteriores:

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

Esencialmente, adjunto una nueva etiqueta de estilo a la cabeza antes de cada evento "show" de datepicker (eliminando el anterior, si está presente). Este método de hacer las cosas soluciona la gran mayoría de los problemas con los que me encontré durante el desarrollo.

Probado en Chrome, Firefox, Safari e IE> 8 (ya que IE8 no funciona bien con jsFiddle y estoy perdiendo el gusto por preocuparme por

Sé que esta es una mezcla de contextos jQuery y javascript, pero en este punto simplemente no quiero esforzarme para convertirlo a jQuery. Sería simple, lo sé. Estoy tan acabado con esto ahora. Espero que alguien más se pueda beneficiar de esta solución.

Answer 15

Primero, creo que debería haber un método afterShowing en el objeto datepicker, donde podría cambiar la posición después de que jquery haya hecho todo su vudú en el método _showDatepicker . Además, un parámetro llamado preferedPosition también sería deseable, por lo que podría establecerlo y jquery modificarlo en caso de que el cuadro de diálogo se represente fuera de la ventana gráfica.

Hay un "truco" para hacer esto último. Si estudia el método _showDatepicker , verá el uso de una variable privada $.datepikcer._pos . Esa variable se configurará si nadie lo configuró antes. Si modifica esa variable antes de mostrar el diálogo, Jquery lo tomará e intentará asignar el diálogo en esa posición, y si lo renderiza fuera de la pantalla, lo ajustará para asegurarse de que esté visible. Suena bien, ¿eh?

El problema es; _pos es privado, pero si no te importa eso. Usted puede:

$(''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
}
});

Pero tenga cuidado con las actualizaciones de Jquery-ui, ya que un cambio en la implementación interna de _showDatepicker podría romper su código.

Answer 16

También vale la pena señalar que si IE cae en el modo peculiar, sus componentes jQuery UI y otros elementos se colocarán incorrectamente.

Para asegurarse de no caer en el modo peculiar, asegúrese de configurar su doctype correctamente en el último HTML5.

<!DOCTYPE html>

Usar transicional hace un lío de cosas. Con suerte, esto le ahorrará a alguien algo de tiempo en el futuro.

Answer 17

Una función jquery muy simple.

$(".datepicker").focus(function(event){
var dim = $(this).offset();
$("#ui-datepicker-div").offset({
top : dim.top - 180,
left : dim.left + 150
});
});

Answer 18

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 19

solucionar problema de posición de show 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();
}
}

Answer 20

.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}