CODEWITHSUNDEEP
jqueryjquery-uidatepickerdrop-down-menu
klox
klox

Reputation: 2093

how to set the show position of datepicker?

dear i have a datepicker inside my form. after i click the textfield, datepicker show to up(reverse with drop down). how do i do if i want to show datepicker dropdown not dropup? http://img413.imageshack.us/img413/1460/screenshot5g.png

Upvotes: 7

Views: 19905

Answers (3)

lamarant
lamarant

Reputation: 3390

expanding on Igor's answer. To position the calendar to the bottom right of the datepicker input element, use this:

$('.datepicker').datepicker({
    beforeShow: function (input, inst) {
        var offset = $(input).offset();
        window.setTimeout(function () {
            var calWidth = inst.dpDiv.width();
            var inpWidth = $(input).width() + parseInt($(input).css('padding'));
            inst.dpDiv.css({ left: offset.left + (inpWidth - calWidth) + 'px' })
        }, 1);
    }
});

Upvotes: 0

Igor Zelmanovich
Igor Zelmanovich

Reputation: 829

 $('.datetime').datepicker({
     dateFormat: 'm/d/yy',
     beforeShow: function (input, inst) {
         var offset = $(input).offset();
         var height = $(input).height();
         window.setTimeout(function () {
             inst.dpDiv.css({ top: (offset.top + height + 4) + 'px', left: offset.left + 'px' })
         }, 1);
     }

 });

Upvotes: 11

vikmalhotra
vikmalhotra

Reputation: 10071

Look for a solution over in this post. Is this what you were looking for?

Upvotes: 0

Related Questions