jQuery datepicker senza input

Question

Ho un'applicazione web abbastanza complessa a cui vorrei aggiungere un'interfaccia utente per la selezione della data.

Il problema che sto incontrando è che non sono stato in grado di capire dai documenti come prendere veramente il controllo di come e quando appare il datapicker. Non ci sono elementi di forma coinvolti (e no, non ho intenzione di aggiungere un campo modulo segreto), quindi l'approccio dead-simple out-of-the-box semplicemente non funzionerà.

Spero che qualcuno possa fornire una piccola guida su un modello che mi permetta di invocare il DatePicker a livello di programmazione. Credo di sapere come utilizzare gli eventi personalizzati di datepicker per inizializzarlo e posizionarlo, e per recuperare il valore scelto quando l'utente lo abbandona. Sto solo facendo fatica a creare un'istanza di un datepicker, dal momento che non lo sto associando a un elemento.

Ecco cosa non è di lavoro:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only 
    var bIsDate = !isNaN((new Date(sCurrent)).getTime()); 

    jQuery.datepicker('dialog', 
     (bIsDate ? new Date(sOriginal) : new Date()), // date 
     function() { console.log('user picked a date'); }, // onSelect 
     null, // settings (i haz none) 
     event // position 
    ); 

} 

La ragione è che "jQuery.datepicker" non è una funzione. (Sto facendo male.)

Non sono sposato con l'approccio 'dialog' - era solo la mia ipotesi migliore per invocarne uno senza fare riferimento a un elemento del modulo.

sto usando jQuery 1.4.3 e 1.8.6 jQueryUI

Answer 1

ho letto attraverso il codice DatePicker, e sembra che, come scritto, il DatePicker deve essere collegato a un tag input, div, o arco.

Quindi, se la vostra unica obiezione è quella di utilizzare un elemento del modulo, quindi collegare ad un div o luce è probabilmente la scelta migliore, e c'è un esempio di come farlo qui: https://stackoverflow.com/a/1112135

Se sei cercando un altro modo per controllare il datepicker, allora potresti dover estendere il codice datepicker per fare ciò che vuoi che faccia, e se segui questa strada, ti consiglio di iniziare dando un'occhiata al metodo privato _inlineDatepicker nel datepicker codice, che è il metodo che collega il datepicker a un tag div o span.

Answer 2

è necessario definire in modo dinamico Campo di immissione quindi allegare il DatePicker voi la vostra classe appena creata Senza campo non penso in modo da funzionare.

<input type="hidden" id="yourField" /> 

e utilizzare

$("#yourField").datepicker({ 
     buttonImage: '../yourImage.png', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showOn: 'both', 
    }); 

Answer 3

Dalla pagina plugin: http://jqueryui.com/demos/datepicker/#inline

<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
</script> 


<div class="demo"> 
    Date: <div id="datepicker"></div> 
</div><!-- End demo --> 

Visualizzare il DatePicker incorporato nella pagina invece che in una sovrapposizione. Basta chiamare .datepicker() su un div anziché su un input.