Come cambiare la posizione del pop-up del controllo jQuery DatePicker

Qualche idea su come far apparire DatePicker alla fine della casella di testo associata anziché direttamente sotto di esso? Ciò che tende ad accadere è che la casella di testo è verso la parte inferiore della pagina e DatePicker si sposta su per conto di esso e copre totalmente la casella di testo. Se l’utente vuole digitare la data invece di sceglierla, non può. Preferisco che appaia subito dopo la casella di testo, quindi non importa come si regola verticalmente.

Qualche idea su come controllare il posizionamento? Non ho visto alcuna impostazione per il widget e non ho avuto fortuna nel modificare le impostazioni CSS, ma potrei facilmente perdere qualcosa.

La risposta accettata per questa domanda non è in realtà per il jQuery UI Datepicker. Per modificare la posizione di jQuery UI Datepicker è sufficiente modificare .ui-datepicker nel file css. Anche la dimensione di Datepicker può essere modificata in questo modo, basta regolare la dimensione del carattere.

Ecco cosa sto usando:

$('input.date').datepicker({ beforeShow: function(input, inst) { inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'}); } }); 

Si potrebbe anche voler aggiungere un po ‘di più al margine sinistro in modo che non sia giusto contro il campo di input.

Lo faccio direttamente nel CSS:

 .ui-datepicker { margin-left: 100px; z-index: 1000; } 

I miei campi di inserimento della data sono tutti larghi 100 px. Ho anche aggiunto lo z-index in modo che il calendario appaia anche sopra i popup AJAX.

Non modifico il file CSS jquery-ui; Sovraccarico la class nel mio file CSS principale, così posso cambiare il tema o aggiornare il widget senza dover reinserire le mie specifiche mod.

Ecco la mia variazione di allineamento del calendario Datepicker.

Penso che sia abbastanza carino, perché puoi controllare il posizionamento tramite jQuery UI Position util.

Una restrizione: richiesta jquery.ui.position.js.

Codice:

 $('input[name=date]').datepicker({ beforeShow: function(input, inst) { // Handle calendar position before showing it. // It's not supported by Datepicker itself (for now) so we need to use its internal variables. var calendar = inst.dpDiv; // Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20) setTimeout(function() { calendar.position({ my: 'right top', at: 'right bottom', collision: 'none', of: input }); }, 1); } }) 

Ecco un’altra variante che funziona bene per me, regolare il rect.top + 40, rect.left + 0 in base alle proprie esigenze:

 $(".datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/dd/yy', beforeShow: function (input, inst) { var rect = input.getBoundingClientRect(); setTimeout(function () { inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 }); }, 0); } }); 
    

Questo funziona per me:

  beforeShow: function(input, inst) { var cal = inst.dpDiv; var top = $(this).offset().top + $(this).outerHeight(); var left = $(this).offset().left; setTimeout(function() { cal.css({ 'top' : top, 'left': left }); }, 10); 

Innanzitutto penso che ci dovrebbe essere un metodo afterShowing nell’object datepicker, in cui è ansible modificare la posizione dopo che jquery ha eseguito tutto il suo voodoo nel metodo _showDatepicker . Inoltre, sarebbe auspicabile anche un parametro chiamato preferedPosition , quindi è ansible impostarlo e modificarlo jquery nel caso in cui la finestra di dialogo venga visualizzata all’esterno della finestra.

C’è un “trucco” per fare quest’ultima cosa. Se studi il metodo _showDatepicker , vedrai l’uso di una variabile privata $.datepikcer._pos . Quella variabile verrà impostata se nessuno l’ha mai installata prima. Se modifichi quella variabile prima di mostrare la finestra di dialogo, Jquery la prenderà e proverà ad allocare la finestra di dialogo in quella posizione, e se la renderà fuori dallo schermo, la regolerà per assicurarsi che sia visibile. Sembra buono, eh?

Il problema è; _pos è privato, ma se non ti dispiace. Puoi:

 $('input.date').datepicker({ beforeShow: function(input, inst) { $.datepicker._pos = $.datepicker._findPos(input); //this is the default position $.datepicker._pos[0] = whatever; //left $.datepicker._pos[1] = whatever; //top } }); 

Ma fai attenzione agli aggiornamenti di Jquery-ui, perché un cambiamento nell’implementazione interna di _showDatepicker potrebbe infrangere il tuo codice.

Avevo bisogno di posizionare il DatePicker in base a un div padre all’interno del quale risiedeva il mio controllo di input senza bordi. Per farlo, ho usato l’utilità “position” inclusa nel core dell’interfaccia utente jQuery. L’ho fatto nell’evento beforeShow. Come altri hanno già commentato, non è ansible impostare la posizione direttamente in beforeShow, poiché il codice datepicker reimposterà la posizione dopo aver terminato la funzione beforeShow. Per aggirare questo, è sufficiente impostare la posizione utilizzando setInterval. Lo script corrente verrà completato, mostrando il datepicker, quindi il codice di riposizionamento verrà eseguito immediatamente dopo che il datepicker è visibile. Anche se non dovrebbe mai accadere, se il DatePicker non è visibile dopo 0,5 secondi, il codice ha un fail-safe per rinunciare e cancellare l’intervallo.

  beforeShow: function(a, b) { var cnt = 0; var interval = setInterval(function() { cnt++; if (b.dpDiv.is(":visible")) { var parent = b.input.closest("div"); b.dpDiv.position({ my: "left top", at: "left bottom", of: parent }); clearInterval(interval); } else if (cnt > 50) { clearInterval(interval); } }, 10); } 

bind focusin dopo aver usato datepicker cambia css del widget di datepicker `s aiuto

 $('input.date').datepicker(); $('input.date').focusin(function(){ $('input.date').datepicker('widget').css({left:"-=127"}); }); 

correggi problema di posizione show daterangepicker.jQuery.js

 //Original Code //show, hide, or toggle rangepicker function showRP() { if (rp.data('state') == 'closed') { rp.data('state', 'open'); rp.fadeIn(300); options.onOpen(); } } //Fixed //show, hide, or toggle rangepicker function showRP() { rp.parent().css('left', rangeInput.offset().left); rp.parent().css('top', rangeInput.offset().top + rangeInput.outerHeight()); if (rp.data('state') == 'closed') { rp.data('state', 'open'); rp.fadeIn(300); options.onOpen(); } } 

Una funzione jQuery molto semplice.

 $(".datepicker").focus(function(event){ var dim = $(this).offset(); $("#ui-datepicker-div").offset({ top : dim.top - 180, left : dim.left + 150 }); }); 

Ho passato una quantità ridicola di tempo a cercare di capire questo problema per diverse pagine di un nuovo sito che sto sviluppando e nulla sembrava funzionare (comprese le varie soluzioni presentate sopra che ho implementato. Sto immaginando che jQuery sia appena cambiato cose abbastanza da quando sono stati suggeriti che le soluzioni non funzionano più. Non lo so. Onestamente, non capisco perché non ci sia qualcosa di semplice implementato in jQuery ui per configurarlo, come sembra essere un problema abbastanza grande con il calendario che appare sempre in una certa posizione molto più in basso nella pagina dall’input a cui è collegato.

Ad ogni modo, volevo una soluzione finale abbastanza generica da poter essere utilizzata ovunque e che avrebbe funzionato. Mi sembra di aver finalmente raggiunto una conclusione che eviti alcune delle risposte più complicate e specifiche del codice jQuery sopra:

jsFiddle: http://jsfiddle.net/mu27tLen/

HTML:

  

JS:

 positionDatePicker= function(cssToAdd) { /* Remove previous positioner */ var oldScript= document.getElementById('datePickerPosition'); if(oldScript) oldScript.parentNode.removeChild(oldScript); /* Create new positioner */ var newStyle= document.createElement("style"); newStyle.type= 'text/css'; newStyle.setAttribute('id', 'datePickerPostion'); if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd; else newStyle.appendChild(document.createTextNode(cssToAdd)); document.getElementsByTagName("head")[0].appendChild(newStyle); } jQuery(document).ready(function() { /* Initialize date picker elements */ var dateInputs= jQuery('input.datePicker'); dateInputs.datepicker(); dateInputs.datepicker('option', { 'dateFormat' : 'mm/dd/yy', 'beforeShow' : function(input, inst) { var bodyRect= document.body.getBoundingClientRect(); var rect= input.getBoundingClientRect(); positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}'); } }).datepicker('setDate', new Date()); }); 

In sostanza allego un nuovo tag di stile alla testa prima di ogni evento “show” di datepicker (cancellando quello precedente, se presente). Questo metodo di fare le cose si aggira intorno alla grande maggioranza dei problemi che ho incontrato durante lo sviluppo.

Testato su Chrome, Firefox, Safari e IE> 8 (come IE8 non funziona bene con jsFiddle e sto perdendo il mio gusto per la cura di

So che si tratta di un mix di contesti jQuery e javascript, ma a questo punto non voglio sforzarmi di convertirlo in jQuery. Sarebbe semplice, lo so. Ho talmente finito con questa cosa adesso. Spero che qualcun altro possa beneficiare di questa soluzione.

Hanno cambiato il nome della class in ui-datepicker-trigger

Quindi funziona in jquery 1.11.x

 .ui-datepicker-trigger { margin-top:7px; margin-left: -30px; margin-bottom:0px; position:absolute; z-index:1000; } 

L’ho preso da (( Come controllare il posizionamento di jQueryUI datepicker ))

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

Funziona !!!

l’ho risolto con il mio codice jquery personalizzato.

  1. ha dato al mio campo di input datepicker una class ” .datepicker2

  2. trova la sua posizione attuale dall’alto e

  3. posizionata la finestra popup, che nome class è ” .ui-datepicker

ecco il mio codice

 $('.datepicker2').click(function(){ var popup =$(this).offset(); var popupTop = popup.top - 40; $('.ui-datepicker').css({ 'top' : popupTop }); }); 

qui “40” è il mio pixel previsto, puoi cambiare con il tuo.

Vale anche la pena notare che se IE cade in modalità Quirks, i componenti dell’interfaccia utente jQuery e altri elementi verranno posizionati in modo errato.

Per assicurarti di non cadere nella modalità quirk, assicurati di impostare correttamente il tuo doctype sull’ultimo HTML5.

 < !DOCTYPE html> 

Usare la transizione fa un casino di cose. Spero che questo salvi qualcuno in futuro.

Ciò mette la funzionalità in un metodo chiamato function, consentendo al codice di incapsularlo o al metodo di creare un’estensione jquery. Appena usato sul mio codice, funziona perfettamente

 var nOffsetTop = /* whatever value, set from wherever */; var nOffsetLeft = /* whatever value, set from wherever */; $(input).datepicker ( beforeShow : function(oInput, oInst) { AlterPostion(oInput, oInst, nOffsetTop, nOffsetLeft); } ); /* can be converted to extension, or whatever*/ var AlterPosition = function(oInput, oItst, nOffsetTop, nOffsetLeft) { var divContainer = oInst.dpDiv; var oElem = $(this); oInput = $(oInput); setTimeout(function() { divContainer.css ({ top : (nOffsetTop >= 0 ? "+=" + nOffsetTop : "-=" + (nOffsetTop * -1)), left : (nOffsetTop >= 0 ? "+=" + nOffsetLeft : "-=" + (nOffsetLeft * -1)) }); }, 10); } 

All’interno di Jquery.UI, basta aggiornare la funzione _checkOffset, in modo che viewHeight venga aggiunto a offset.top, prima che venga restituito l’offset.

 _checkOffset: function(inst, offset, isFixed) { var dpWidth = inst.dpDiv.outerWidth(), dpHeight = inst.dpDiv.outerHeight(), inputWidth = inst.input ? inst.input.outerWidth() : 0, inputHeight = inst.input ? inst.input.outerHeight() : 0, viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()), viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop)); offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0); offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0; offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0; // now check if datepicker is showing outside window viewport - move to a better place if so. offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0); offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(dpHeight + inputHeight) : 0); **offset.top = offset.top + viewHeight;** return offset; }, 
 .ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);} 

Qui è abbastanza per:

 $(".date").datepicker({ beforeShow: function(input, { inst.dpDiv.css({ marginLeft: input.offsetWidth + "px" }); } });