Какой код jquery или плагин я бы использовал для обновления позиции элемента?

Question

Я использую плагин jquery из [FilamentGroup] с именем DateRangePicker.

У меня есть простая форма с двумя текстовыми вводами для начальной и конечной даты, которую я привязываю DateRangePicker к использованию этого

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

У меня есть сворачиваемая таблица над этой формой, которая, когда отображается, перемещает форму и элементы, с которыми связан плагин daterangepicker, вниз на страницу, но кажется, что daterangepicker не позволяет сохранить положение с момента его создания.

Какой код я мог бы вставить в onShow Callback для daterangepicker, чтобы обновить свою позицию, чтобы быть рядом с элементом, к которому изначально был привязан? Или есть какой-то конкретный метод или плагин jquery, который я мог бы связать с плагином daterangepicker, чтобы он корректно обновил свою позицию. Это может пригодиться для некоторых других плагинов, которые я использую, которые, кажется, также не сохраняют свою позицию относительно других элементов.

Answer 1

Попробуйте Позиция jQuery UI :

Служебный скрипт для абсолютно позиционирование любого виджета относительно окно, документ, конкретный элемент, или курсор / мышь.

Пример

$('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 для ввода по идентификатору вместо класса, вам нужно вызывать метод position только один раз:

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

Answer 2

Я думаю, что вам не нужен плагин или передать обратный вызов обработчику daterangepicker onShow.

Вам просто нужно обновить позицию указателя даты в то же время, когда вы показываете свою таблицу. Вот так:

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

Этот код должен работать только для одного указателя даты на странице (поскольку .offset запрашивает только первый элемент в коллекции).