ottenere il datapicker di jQuery UI per aprire sempre in una determinata direzione?

Question

Sto utilizzando il controllo DatePicker dell'interfaccia utente di jQuery in una barra degli strumenti position: fixed nella parte inferiore della mia pagina. Occasionalmente, su computer casuali, il DatePicker appare sotto la barra degli strumenti, il che significa che è fuori dalla pagina e impossibile da visualizzare o interagire con.

C'è un modo per forzare il posizionamento del controllo datapicker in modo che sia sempre sopra e alla destra del suo <input>?

Answer 1

Si potrebbe cambiare le linee:

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0; 
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0; 

... da leggere:

offset.left = $(inst.input).position().left + dpWidth; 
offset.top = $(inst.input).position().top - dpHeight; 

Questo perde flessibilità, però. Se il tuo input si trova nella parte superiore della pagina, avrai il problema opposto di prima.

Answer 2

Dalla documentazione, sembra che potresti essere in grado di utilizzare lo 'dialog' method del plug-in DatePicker per ottenere il risultato desiderato. Tuttavia, l'utilizzo di questo probabilmente significa che dovrai implementare parte della colla che altrimenti otterresti con datepicker, come un gestore di callback per estrarre la data, ecc.

Ho provato per prendere in giro del codice per vederlo in azione e per far sì che il datepicker non venga visualizzato, non sono riuscito a farlo funzionare. Ad ogni modo, volevo indicarti nel caso avessi miglior fortuna di me.

Answer 3

Il problema è quell'elemento in posizione: fisso mostra la posizione superiore 0px (verificare con: avviso $ ('# datepicker2'). Position()).

Soluzione:

$('#datepicker').datepicker({beforeShow: function(input) { 
    var x = 100; //add offset 
    var y = 20; 
    field = $(input); 
    left = field.position().left + x; 
    bottom = y; 
    setTimeout(function(){ 
     $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});  
    },1);      
}} 

prova HTML:

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action=""> 
    <label> 
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker"> 
    </label> 
</form> 

Answer 4

L'unico modo per essere certi (per la versione jQueryUI di datepicker) è quella di disabilitare la funzionalità del DatePicker che cerca di rendere all'interno il viewport. Ecco un modo per farlo senza modificare i file di codice sorgente:

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}); 

sulle versioni successive di JQuery UI prova:

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}); 

Che armi nucleari solo la funzione _checkOffset all'interno datepicker che lo rende di scoiattoli. Quindi puoi usare il css .ui-datepicker per assicurarti che rimanga fisso se è quello che stai cercando. Maggiori informazioni allo how-to-control-positioning-of-jqueryui-datepicker.

Answer 5

http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php

verifica questo. L'ho usato ed è stato in grado di posizionare il controllo DatePicker in tutti i browser.

Answer 6

Ho avuto un problema simile. Ho una pagina con raccoglitori di date potenzialmente utilizzati in varie posizioni sulla pagina, ma anche su un'intestazione fissa in cui l'utente può scorrere la pagina sia orizzontalmente che verticalmente con l'intestazione fissa che rimane al suo posto. L'intestazione ha anche un datepicker. Quindi non posso fare un cambiamento globale di datepicker.

Questo è quello che ho fatto. È certamente un kluge ma funziona così ho pensato che potesse aiutare qualcun altro.Speriamo che in futuro il jpery datepicker aggiungerà un'opzione di posizione.

beforeShow: function(input, inst) { 
    $("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none"); 

    window.setTimeout(function() { 
     var leftPosition = parseInt($(window).width()/2); 
     $("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition }); 
     $("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit"); 
    }, 500); 
}