Montag, 21. März 2011

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

Keine Kommentare:

Kommentar veröffentlichen