Mittwoch, 9. März 2011

jQuery DatePicker: Popup ausrichten

JQuery-UI 1.8.2

Der Datepicker ist ein unkompliziertes Datumsauswahltool, positioniert man allerdings das aufrufende Element zu weit rechts kann es einem passieren das das Popup aus dem Fenster rutscht. Abhilfe schafft dieses Codeschnippsel:

function addDatepicker(fieldId ){
    var $field = $( '#' + fieldId );
 if( $field.length > 0 && $field[0].disabled != true && $field[0].readonly != true && $field.hasClass("textoutput") != true){
     $field.datepicker({showOn: 'button',
       buttonImage: 'img/calendar_icon.gif',
       buttonImageOnly: true,
       buttonText: 'Kalender',
       changeMonth: true,
       changeYear: true,
       beforeShow: function(fieldId) {
           var x = 100; //add offset 
           field = $(fieldId);
           left = field.position().left + x;
           setTimeout(function(){
               $('#ui-datepicker-div').css({'left': left + 'px'});      
           },1);                    
       }
     } );
    }
}

Der Event beforeShow setzt hier das Popup etwas nach links, damit es ganz sichtbar ist, die Methode setTimeout brauchen wir, da es anders irgendwie nicht so gut klappt.

Links:
Datepicker Dokumentation
Stackoverflow Eintrag mit der Lösung des Problems
Datepicker Demos

Keine Kommentare:

Kommentar veröffentlichen