Come chiamare/associare un datepicker jquery ad un'etichetta o div invece di un campo di input

Question

sto lavorando con il DatePicker jQueryUI in questa pagina - http://jqueryui.com/demos/datepicker/

Come chiamare su un'etichetta invece di un ingresso campo? È possibile?

Answer 1

Non ho guardato il codice ma ho il sospetto che si presume che sia collegato a un elemento <input type="text">.

Supponiamo quindi di avere quell'elemento.

È possibile nascondere <input> e interagire con il datapicker tramite chiamate ai relativi metodi dagli eventi dell'etichetta.

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

Answer 2

Stai cercando di associarlo in modo che si visualizzi in un clic o in modo che i risultati popolano un'etichetta o Div? È possibile associarlo a una casella di testo nascosta e quindi associare gli effetti desiderati all'evento change() di quel campo nascosto.

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

questo ha funzionato bene per me in Firefox 3.5

Answer 3

Re: il problema di posizionamento:

Sembra Datepicker imposta la sua posizione assolutamente, in base l'offset dell'elemento è targeting. Sfortunatamente, display: nessuno degli elementi non ha offset.

Due suggerito metodi:

1) Impostare la posizione utilizzando un proprio metodo di datepicker e l'offset di un oggetto di vostra scelta. Provare qualcosa di simile:

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

2) Prova un diverso metodo di nascondere il proprio ingresso, forse qualcosa di simile opacità: 0 (e il suo IE equivalente, filtro: alpha (opacità = x)). Un'altra cosa da provare potrebbe essere la creazione di un gruppo di stili per ridurre il campo di inserimento, come:

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

Prendi l'ingresso più vicino possibile invisibile possibile senza realmente rimuoverlo dalla pagina visibile, che ha bisogno di esistere in modo che datepicker possa ottenere una posizione.

Answer 4

Re: Il problema di posizionamento

I suggerimenti di cui sopra non ha funzionato per me per ottenere un'interfaccia utente pulita. Ho attivato il controllo Datepicker quando le persone fanno clic su un'etichetta e non volevo che la casella di testo fosse visualizzata (il tentativo di css sopra era vicino, ma la casella di testo si concentrava tra le altre questioni).

La soluzione per me è stato quello di rendere la casella di testo che il DatePicker è collegato a un tipo di ingresso < = "hidden" .... /> Ciò ha risolto tutti i problemi per me (ho messo il controllo di input nascosto appena prima l'etichetta in modo che l'offset dal controllo di input fosse corretto per la mia etichetta).

In particolare, l'impostazione di un normale input controlla lo stile da visualizzare: nessuno, o visibilità: nascosta, ecc. Non ha funzionato.

Il motivo per cui questa soluzione ha funzionato è dovuto alle clausole nell'origine del controllo datepicker che eseguono determinate funzioni solo se "type! =" Hidden ".

Answer 5

Datepci inizializza sull'elemento di input (casella di testo), ma in base a this bug non può essere inizializzato su input nascosto. Ho trovato il trucco con un cambiamento fonte bit in 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; 
    } 

variazione è qui

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

Answer 6

Volevo un testo di agire come il mio grilletto. Ho risolto questo problema avendo un input all'interno di un div display-inline l'ingresso è praticamente invisibile all'interno utilizzando opacity: 0, position: absolute + pointer-events: none.

Vedi il mio esempio qui: http://codepen.io/KATT/pen/XJbmVr