Question

I am using a jquery plugin from [ FilamentGroup ] called DateRangePicker.

I have a simple form with two text inputs for the start and end date that I bind the DateRangePicker to using this

$('input.tbDate').daterangepicker({
            dateFormat: 'mm/dd/yy',  
            earliestDate: new Date(minDate),  
            latestDate: new Date(maxDate),  
            datepickerOptions: {  
                changeMonth: true,  
                changeYear: true,  
                minDate: new Date(minDate),  
                maxDate: new Date(maxDate)  
            }  
        }); 

I have a collapsible table above this form that when shown, moves the form and the elements that the daterangepicker plugin is bound to, down lower on the page, but the daterangepicker appears to keep the position from when it was actually created.

What code could I put in the daterangepicker’s onShow Callback to update its position to be next to the element is was initially bound to? Or is there some specific jquery method or plugin that I could chain to the daterangepicker plugin so that it will update its position correctly. This would come in handy for some other plugins that I use that don’t seem to keep their position relative to other elements correctly either.

Answer 1

Try jQuery UI position:

Utility script for absolutely
positioning any widget relative to the
window, document, a particular
element, or the cursor/mouse.

EXAMPLE

$('input.tbDate').daterangepicker({
    dateFormat: 'mm/dd/yy',
    datepickerOptions: {
        changeMonth: true,
        changeYear: true
    },
    onOpen: function () {
        $('.ui-daterangepickercontain').position({
            my: "left top",
            at: "left bottom",
            of: $('input.tbDate')
        });
    }
});

… actually, if you set the select the input by ID instead of class, you only need to call the position method once:

$('#two').daterangepicker({
    dateFormat: 'mm/dd/yy',
    datepickerOptions: {
        changeMonth: true,
        changeYear: true
    }
});
$('.ui-daterangepickercontain').position({
    my: "left top",
    at: "left bottom",
    of: $('#two')
});