getting jQuery UI's datepicker to always open in a certain direction?

Question

I'm using jQuery UI's datepicker control in a position: fixed toolbar at the bottom of my page. Occasionally, on random computers, the datepicker appears below the toolbar, which means it's off the page and impossible to view or interact with.

Is there a way to force the positioning of the datepicker control to always be above and to the right of its <input>?

Can you better trim the randomness of the error? Some versions of Firebug get mess with the page-height offsetting elements and, in theory, could be responsible for the outcome. Or are we talking Internet Explorer? — Frankie, Nov 02 '09 at 16:56

score 19 · Answer 1 · edited May 23 '17 at 12:07

19

The only way to be certain (for the jQueryUI version of datepicker) is to disable the functionality of the datepicker that tries to render inside the viewport. Here's a way to do it without modifying the source code files:

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

on later versions of JQuery UI try:

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

That just nukes the _checkOffset function inside datepicker that makes it squirrelly. Then you can use the .ui-datepicker css to make sure it stays fixed if that's what you're after. More info at how-to-control-positioning-of-jqueryui-datepicker.

edited May 23 '17 at 12:07

Community

1
1

answered Nov 30 '09 at 22:36

Purrell

12,461
16
58
70

Thanks so much for this. What a pain! – Jun 17 '10 at 23:30
@Purell you are a star! Have been searching for this for ages, trying out many different approaches and this is the only most solid solution so far. Thanx heaps. – Philzen Aug 10 '16 at 09:40

score 10 · Answer 2 · answered Oct 30 '09 at 01:20

Problem is that element in position: fixed show top position 0px (check with: alert$('#datepicker2').position()).

Solution:

$('#datepicker').datepicker( {beforeShow: function(input) {
    var x = 100; //add offset
    var y = 20; 
    field = $(input);
    left = field.position().left + x;
    bottom = y;
    setTimeout(function(){
        $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});      
    },1);                    
}}

Test HTML:

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
  <label>
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
  </label>
</form>

I know this is an older post but it's the only thing that worked for me of all the posted solutions. jmav, thank you. — Travis, Jul 27 '10 at 20:33

score 6 · Accepted Answer · answered Oct 27 '09 at 18:36

6

You could change the lines:

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;

...to read:

offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;

This loses flexibility, though. If your input happens to be at the top of the page, you'll have the opposite problem from before.

answered Oct 27 '09 at 18:36

Kev

15,899
15
79
112

Thanks. The datepicker is never at the top of the page, and this is a very limited system so I can say with reasonable certainty it'll stay that way. Will try this out, but if anyone has a solution that doesn't require editing the core jQuery UI code that'd be great too. – ceejayoz Oct 27 '09 at 18:47
6

There is a way to do it without editing the core source files, see answer below. IMO there should be an option to disable the auto positioning feature. – Purrell Nov 30 '09 at 22:46
I think part of "_checkOffset: function" in http://code.jquery.com/ui/1.9.1/jquery-ui.js but it's changed a bit since this was posted. – Kev Oct 29 '12 at 12:12

score 3 · Answer 4 · answered Aug 01 '11 at 20:08

3

http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php

check this. I used this and was able to position the datepicker control in all browsers.

answered Aug 01 '11 at 20:08

Aseem

31
1

score 1 · Answer 5 · edited Jul 11 '12 at 17:36

I had a similar problem. I have a page with date pickers potentially used at various placed on the page but also on a fixed header where the user can scroll the page both horizonally and vertically with the fixed header staying in place. The header also has a datepicker. So I can't do a global change of datepicker.

This is what I did. It is admittedly a kluge but it works so I thought it might help someone else. Hopefully in the future the jquery datepicker will add a position option.

beforeShow: function(input, inst) {
    $("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none" );

    window.setTimeout(function() { 
        var leftPosition = parseInt($(window).width() / 2);
        $("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition });
        $("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit" );
    }, 500);
}

score 0 · Answer 6 · answered Oct 28 '09 at 22:45

From the documentation, it looks like you might be able to use the 'dialog' method of the datepicker plugin to achieve your desired outcome. However, using this most likely means that you will have to implement some of the glue that you would otherwise get out-of-the-box with datepicker, such as a callback handler to extract the date, etc.

I tried to mock up some code to see it in action and short of getting the datepicker to display, I couldn't quite get it working, though. Anyway, I wanted to point you to it in case you have better luck than I did.

getting jQuery UI's datepicker to always open in a certain direction?

6 Answers6

Linked