javascript - pasadas - Cómo llamar/vincular un jquery datepicker a una etiqueta o div en lugar de un campo de entrada

jquery datepicker mostrar solo mes y año

Question

Estoy trabajando con el jqueryui datepicker en esta página - http://jqueryui.com/demos/datepicker/

¿Cómo lo llamo en una etiqueta en lugar de un campo de entrada? es posible?

Answer 1

No he visto el código, pero sospecho que asume que está conectado a un elemento <input type="text"> .

Entonces, suponga que debe tener ese elemento.

Puede ocultar la <input> e interactuar con el selector de fecha mediante llamadas a sus métodos desde los eventos de su etiqueta.

$(labelselector).click(function() {
$(inputselector).datepicker(''show'');
});

Answer 2

¿Está intentando vincularlo para que se muestre al hacer clic o para que los resultados llenen una etiqueta o div? Puede vincularlo a un cuadro de texto oculto y luego vincular los efectos deseados al evento change () de ese campo oculto.

$(function() {
$("#datepicker").datepicker();
$("#alternate").click(function() {
$("#datepicker").focus();
});
$("#datepicker").change(function() {
$("#alternate").html($("#datepicker").val());
});
});
<input id="datepicker" style="display:none" /><label id="alternate">change me</label>

Esto funcionó bien para mí en FireFox 3.5

Answer 3

re: el problema de posicionamiento:

Parece que Datepicker establece su posición de manera absoluta, en función del desplazamiento del elemento al que apunta. Lamentablemente, mostrar: ninguno elementos no tienen desplazamiento.

Dos métodos sugeridos:

1) Establezca la posición usando el método de datepicker y el desplazamiento de un objeto de su elección. Pruebe algo como:

offset = $(''myinput'').parent(''label'').offset();
$(''#date-picker'').dpSetOffset(offset.left, offset.top);

2) Pruebe con un método diferente para ocultar su entrada, tal vez algo como opacidad: 0 (y su equivalente IE, filtro: alfa (opacidad = x)). Otra cosa para probar podría ser configurar un grupo de estilos para reducir el campo de entrada, como:

.my_input {
border: 0;
line-height: 0;
font-size: 0;
height: 0;
overflow: hidden;
}

Obtenga la entrada lo más cerca posible de lo invisible sin eliminarla realmente de la página visible, en la que debe existir para que datepicker obtenga una posición.

Answer 4

re: El problema de posicionamiento

Las sugerencias anteriores no me funcionaron para obtener una interfaz de usuario limpia. Tengo mi control de marcación de fecha activado cuando las personas hacen clic en una etiqueta, y no quería que se mostrara el cuadro de texto (el intento de css anterior estaba cerca, pero aun así el cuadro de texto se enfocaba entre otros problemas).

La solución para mí fue hacer que el cuadro de texto que el datepicker esté adjunto a un <input type = "hidden" ... /> Esto resolvió todos los problemas para mí (puse el control de entrada oculto justo antes de la etiqueta para que el desplazamiento desde el control de entrada fue correcto para mi etiqueta).

Notablemente, establecer un estilo de controles de entrada normal para mostrar: none, o visibility: hidden, etc. no funcionó.

El motivo por el que esta solución funcionó se debe a las cláusulas en el origen del control datepicker que solo realizan ciertas funciones si "type! =" Hidden ".

Answer 5

Datepciker se inicializa en el elemento de entrada (cuadro de texto), pero según este error no se pudo inicializar en la entrada oculta. Encontré el truco con un poco de cambio de fuente en jqueryUi:

_findPos: function(obj) {
var inst = this._getInst(obj);
var isRTL = this._get(inst, ''isRTL'');
while (obj && (obj.type == ''hidden'' || obj.nodeType != 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? ''previousSibling'' : ''nextSibling''] || obj.parentNode;
}

El cambio estaba aquí

 obj = obj[isRTL ? ''previousSibling'' : ''nextSibling''];

Answer 6

Quería que un texto actuara como mi disparador. Lo resolví al tener una entrada dentro de un div display-inline tiene la entrada virtualmente invisible adentro usando opacity: 0 , position: absolute + pointer-events: none .

Vea mi ejemplo aquí: http://codepen.io/KATT/pen/XJbmVr