What jQuery code or plugin should I use to update the position of an element?

Question

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

I have a simple form with two text inputs for a start and end date with which I bind DateRangePicker to 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, which, when shown, moves the form and the elements the daterangepicker plugin is attached to down on the page, but the daterangepicker seems to maintain a position from the moment it was created.

daterangepicker onShow Callback, , , ? - jquery , daterangepicker, . , , , , .

Answer 1

jQuery UI:

script , , /.

$('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')
        });
    }
});

... , select , :

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

Answer 2

, onShow daterangepicker.

daterangepicker . :

jQuery(document).ready(function(){
    // setup daterangepicker
    $('input.tbDate').daterangepicker({
         // ...
    });
    // query dom once and store for performance
    var dateranges = $('.ui-daterangepickercontain');
    // remember daterangepicker original top 
    var daterangeoriginaltop = dateranges.offset.top;
    // setup collapsable table
    $('#openCloseButton').click(function(e){
        $('#myTable').slideToggle('slow', function(){
            daterangepicker.css({
                'top': daterangeoriginaltop + $('#myTable').outerHeight();
            });
        });
    }); 
});

daterangepicker ( .offset ).