Jquery ui datepicker position

Question

I have problem in Jquery ui datepicker position relative to input type hidden.

I triggered datepicker on click of FontAwesome icon and saving selected date in input type hidden. All working but datepicker calendar position is not below to the icon.

Answer 1

Jquery

    $(document).ready(function(){
    $('#trigger').click(function() {
            $('#dp').show().focus().hide();
        });
    $('#dp').datepicker({
            altField: '',
            dateFormat: "dd-mm-yy",
            beforeShow: function (input, inst) {
                var rect = input.getBoundingClientRect();
                console.log(rect);
                console.log(input);
                setTimeout(function () {
                    inst.dpDiv.css({ top: rect.top + 22, left: rect.left + -130 });
                }, 0);
            },onSelect: function (date) {
                $('#eventSearchForm').submit();
            }
        });
});

Html

<form id="eventSearchForm" method="get" action="/index.php">
<div class="row">
    <div class="form-group col-lg-12 col-xs-12 col-sm-12">
        <div class="input-group date">
            <input type="search" name="keywords" class="form-control pull-left searchField" />
            <div class="input-group-btn">
                <input type="text" id="dp" style="display: none" name="date" class="">
                <button class="btn btn-default trigger iconbtn" id="trigger" type="button"><i class="fa fa-calendar" aria-hidden="true"></i></button>
            </div>
        </div>
    </div>
    <input type="submit" name="search" />
</div>