jQuery Datepicker: buttonImage ausrichten

JQuery-UI 1.8.2

In meinem letzten Beitrag wollte ich das Popup des Datepickers verschieben, nun will ich den Button, mit dem der Datepicker aufgerufen wird etwas anders positionieren.

Vorher noch die Methode, mit der man den Datepicker an ein Inputfeld hängt:

/**
 * Erzeugt einen Kalenderbutton in deutscher Sprache, wenn das Feld nicht disabled ist.
 *
 * @param fieldId: Id des Tags als String
 * @param addToTop: px value to add to the input field.top
 */
function addDatepicker(fieldId, addToTop){
    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,
       yearRange: 'c-20:c+50',
       changeYear: true,
       beforeShow: function(fieldId) {
           var x = 100; //add offset 
           field = $(fieldId);
           left = field.position().left + x;
           /* top - 145 works for above the input */
           setTimeout(function(){
            if(addToTop != undefined || addToTop != null){
                var top = field.position().top + addToTop;
                $('#ui-datepicker-div').css({'top': top + 'px', 'left': left + 'px'});
            } else {
                $('#ui-datepicker-div').css({'left': left + 'px'});
            }
           },1);     
       }
     } );
    }
}

Dazu benutze ich CSS, in diesem ganz einfachen Fall will ich den Button einfach etwas runter setzen und hänge mich dazu an den ui-datepicker-trigger.

.ui-datepicker-trigger {
                               margin-bottom: -3px;
}

Links:
Blogbeitrag mit Lösung

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