Come allineare Datepicker al bordo destro della casella di testo?

Question

Ho jQuery UI Datepicker sul bordo in alto a destra del mio layout.
Per impostazione predefinita, si apre allineato al bordo sinistro della sua casella di testo.
Così, cade fuori del layout:

Come di renderla aperta allineato al bordo destro della sua casella di testo?

Answer 1

Semplicemente, è possibile impostare l'opzione rtl (Arabin way) in jQuery. Cerca isRTL, quindi modifica il valore da falso a vero. (isRTL: true)

Se è sufficiente allineare l'intera finestra popup, quindi, è sufficiente impostare l'opzione rtl e rimuovere l'attributo di direzione nel css personalizzato. Es .: .ui-datepicker-rtl {}

Tuttavia, questo non verrà impostato sulle frecce per spostarsi tra i mesi. Se ti serve anche quella funzionalità, allora devi fare più lavoro. Devi modificare la funzionalità di base relativa a rtl (cerca isrtl e modifica i valori di conseguenza) & cambiando il css relativo a rtl.

Answer 2

Mi ci è voluto un po 'per capirlo.

Answer 3

La soluzione di Alex è stata buona, ma non ha funzionato bene se si è tentato di ridimensionare la finestra. Il problema era che jquery ui sta cercando di calcolare la posizione del widget, in modo che non rimanga mai fuori dalla vista. Il fatto è che non funziona bene con la soluzione di Alex. Ho cambiato il codice sorgente (che non è molto bello, ma solo la soluzione che ho trovato) per raggiungere il risultato. Ecco la funzione on line 3960 che ho cambiato:

/* Check positioning to remain on screen. */ 
    _checkOffset: function(inst, offset, isFixed) { 
     // CHANGED This way I can add class date-right to the input to make it right aligned 
     var isRightAlign = inst.input.hasClass('date-right'); 

     var dpWidth = inst.dpDiv.outerWidth(); 
     var dpHeight = inst.dpDiv.outerHeight(); 
     var inputWidth = inst.input ? inst.input.outerWidth() : 0; 
     var inputHeight = inst.input ? inst.input.outerHeight() : 0; 
     var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()); 
     var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : $(document).scrollTop()); 

     // CHANGED Alex's solution is implemented on the next line (just add || isRightAlign) 
     offset.left -= (this._get(inst, 'isRTL') || isRightAlign ? (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() : 0; 

     // CHANGED Do not check if datepicker is outside of the viewport if it's right aligned 
     if(!isRightAlign){ 
      // 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); 

     return offset; 
    }, 

Answer 4

Lo so che è una vecchia questione ... ma ancora soluzione non nativa ... ecco un pezzo aggiornata di codice:

$('.datepicker').datepicker({ 
    beforeShow:function(input, inst) 
    { 
     var dp = $(inst.dpDiv); 
     var offset = $(input).outerWidth(false) - dp.outerWidth(false); 
     dp.css('margin-left', offset); 
    } 
}); 

Answer 5

Puoi allineare il selettore di data dell'interfaccia utente jQuery dal lato destro corrispondente al campo di immissione.

[Qui -176 è la larghezza della mia datepicker div, è possibile modificare in base alle proprie necessità.]

Controlli prego Demo

http://jsfiddle.net/VijayDhanvai/m795n3zx/

http://jsfiddle.net/m795n3zx/

$(document).ready(function() { 
     $('#txtDateFrom,#txtDateTo').datepicker({ 
     changeYear: true, 
     beforeShow: function (textbox, instance) { 
     instance.dpDiv.css({ 
      marginLeft: textbox.offsetWidth+ (-176) + 'px' 
     }); 
     } 
     }); 
    }); 

Answer 6

options.widgetPositioning={ 
       horizontal:'right' 
       ,vertical: 'auto' 
      }; 

esecuzione

cf. https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning

Answer 7

Questo è stato risposto qui: https://stackoverflow.com/a/28113070/6173628

L'opzione orientamento è ciò che funziona:

//datepicker 
$('dob').on('click',function(){ 
    $('.datepicker').datepicker({ 
     "format": "dd/mm/yyyy", 
     "autoclose": true, 
     "orientation": right 
    }); 
});