Come rendere sempre visibile Pikaday DatePicker

Question

Sto usando lo Pikaday javascript datepicker.

La funzionalità predefinita è quella di collegarlo a un input in cui facendo clic sull'ingresso verrà caricato il datario e la sua posizione sarà relativa all'input.

Quello che voglio è usare questa libreria per mostrare un calendario sempre visibile. Ho provato diverse cose senza successo come ad esempio collegarlo a un div. Mi piacerebbe poterlo mostrare sempre e poter controllare la sua posizione.

Qualche idea?

Answer 1

Nel caso in cui questo aiuta qualcun altro:

Dal momento che la libreria Pikaday non è destinata in realtà per essere utilizzato in questo modo, ho dovuto realizzare un lavoro in giro. La cosa buona è che non richiede modifiche al codice Pikaday stesso ed è quindi completamente compatibile con le versioni future (supponendo che non rinominino la funzione "nascondi").

Per prima cosa ho appena allego il selettore data per un div vuoto e muoverlo usando css fino alla sua nel posto giusto:

var datePicker = new Pikaday({ 
    field: $('#empty-div')[0] 
}); 

Poi ho semplicemente procura la pelle funzione di Pikaday e impostarlo su un noop temporanea :

var hideFun = datePicker.hide; 
datePicker.hide = function() {/*noop*/} 

Ora, posso mostrare il selettore data e non ti preoccupare di fuga su di me (in quanto internamente richiamerà la nuova funzione noop nascondere):

datePicker.show(); 

Infine, quando sono pronto a ripristinare il funzionamento originale del DatePicker, I ha ripristinato la funzione di quella originale, e nascondere il DatePicker (dal momento che sto mostrando in un modale):

datePicker.hide = hideFun; 
datePicker.hide(); 

Answer 2

In un primo momento, ho anche implementato una soluzione hacky, ma poi ho trovato un modo normale di fare Pikaday datepicker sempre visibile:

var picker = new Pikaday(
{ 
    field: document.getElementById('datepicker'), 
    bound: false, 
    container: document.getElementById('container'), 
}); 

Con l'esempio qui: http://dbushell.github.io/Pikaday/examples/container.html