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

¿Cómo puedo llamar en una etiqueta en lugar de un campo de entrada? Es esto posible?

InformationsquelleAutor stringo0 | 2009-08-11

6 Comentarios

  1. 17

    No he mirado el código, pero tengo la sospecha de que se supone que se ha asociado a un <input type="text"> elemento.

    Así que asumo que debe tener ese elemento.

    Puede ocultar el <input> e interactuar con el selector de fechas a través de llamadas a sus métodos de su etiqueta de eventos.

    $(labelselector).click(function() {
        $(inputselector).datepicker('show');
    });
    • Esto hizo que el truco! Gracias
    • Estoy teniendo problemas con eso – si el campo de entrada está configurado como oculto (display:none), el calendario parece estar apareciendo en la parte superior izquierda de la página – ¿alguna idea?
    • poner el campo de entrada en un div y la posición de la div
  2. 11

    re: El posicionamiento problema

    Las sugerencias anteriores no funcionan para mí para conseguir una limpia interfaz de usuario. Tengo mi datepicker de control activado cuando la gente haga clic en una etiqueta, y yo no quería que el cuadro de texto se muestra en todas (la de arriba css intento estaba cerca, pero aún así el cuadro de texto consiguió centrarse, entre otras cuestiones).

    La solución para mí era hacer que el cuadro de texto que el datepicker está conectado a un < input type=»hidden» …. /> Esta solucionado todos los problemas por mí (yo pongo el oculto control de entrada justo antes de la etiqueta, de modo que el desplazamiento desde el control de entrada era el adecuado para mi etiqueta).

    En particular, el establecimiento de una entrada normal de los controles de estilo display: none, o visibility: hidden, etc. no trabajo.

    La razón de que esta solución ha funcionado es debido a las cláusulas de la fuente de la datepicker de control que sólo realizar ciertas funciones si «tipo != «oculto».

    • Que exactamente trabajado para mí (input oculto). Gracias.
  3. 6

    Están tratando de enlazar de manera que se muestra en haga clic en o para que los resultados rellenar una Etiqueta o un Div? Usted podría unirse a un cuadro de texto oculto, a continuación, enlazar los efectos deseados para el cambio() el evento de que el 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ó muy bien para mí en FireFox 3.5

    • Yo quiero hacer lo que está haciendo en su código, salvo que yo quiero hacer es que cuando la etiqueta se hace clic en (botón no, la etiqueta en sí se hace clic en su lugar)
    • Para esto, deshacerse de el datepicker de parámetros (showOn, buttonText) y registrar focus() para el #datepicker en el clic de la etiqueta. He añadido el código actualizado para mi respuesta original. De esta manera, se centran en el #selector de fecha, se iniciará el calendario y rellenar el cuadro de texto oculto. En cambio en el cuadro de texto de rellenar la etiqueta.
  4. 1

    re: el posicionamiento problema:

    Parece Datepicker define su posición absolutamente, basado en el desplazamiento del elemento de que se orienta. Por desgracia, display: none elementos no tienen ningún desplazamiento.

    Dos métodos sugeridos:

    1) Establecer la posición utilizando el selector de fechas del propio método y el desplazamiento de un objeto de su elección. Intente algo como:

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

    2) Probar un método diferente de ocultar su entrada, tal vez algo parecido a la opacidad: 0 (y su IE equivalente, filter:alpha(opacity=x)). Otra cosa a tratar podría ser el establecimiento de un montón de estilos para reducir el campo de entrada, como:

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

    Obtener la entrada tan cerca invisible como sea posible sin llegar a quitarlo de la página visible, que debe existir en el fin de selector de fecha para obtener una posición de.

    • Gracias por las sugerencias!
    • Sí, también establecer el relleno de la entrada de texto para 0px: padding: 0px.
  5. 1

    Yo quería un texto para que actúe como mi gatillo. Lo resuelto por tener una entrada dentro de un display-inline div tiene la entrada prácticamente invisible en el interior con opacity: 0, position: absolute + pointer-events: none.

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

  6. 0

    Datepciker inicializa en la entrada(textbox), elemento, pero de acuerdo a este error no podía ser inicializado en la entrada ocultos. He encontrado el truco con un poco de cambiar la 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;
        }

    Cambio fue aquí

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

Dejar respuesta

Please enter your comment!
Please enter your name here