CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
Zaur
Zaur

Reputation: 13

jQuery datepicker positioning

I saw many questions and answers about datepicker positioning, but cannot find answer to my situation.

So, here is my datepicker creator function:

$(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'dd/mm/yy',
        minDate:current_date,
        currentText: 'Today',
        firstDay: 1,
    });

When I click the input, the datepicker appears in right position, but when I reduce the width of the browser window, it stays in the same position(that's because it's position is absolute).

I need to change the picker appearance, so that it stays in the same position as the input.

Thanks in advance

Upvotes: 0

Views: 395

Answers (1)

blgt
blgt

Reputation: 8205

The code that repositions the datepicker is found in the jQueryUI's $.datepicker._showDatepicker function. It's rather ugly, but not terribly difficult, to adapt it for a .resize handler. Here are the lines that makes the magic happen:

    inst = $.datepicker._getInst(input);
    if (!$.datepicker._pos) { // position below input
        $.datepicker._pos = $.datepicker._findPos(input);
        $.datepicker._pos[1] += input.offsetHeight; // add the height
    }
    offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]};
    // and adjust position before showing
    offset = $.datepicker._checkOffset(inst, offset, isFixed);
    inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
        "static" : (isFixed ? "fixed" : "absolute")), display: "none",
        left: offset.left + "px", top: offset.top + "px"});

inst.dpDiv is a reference to the wrapper around your datepicker, and inst is the reference to the datepicker itself.

Here's a fiddle with a minimalistic example. Beware edge cases.

Upvotes: 1

Related Questions