jQuery UI datepicker изменить отступ от поля ввода

Суть проблемы:

Есть сайт на WordPress где установлен плагин Contact Form 7. Создана форма на которой есть поле ввода даты. Если брать поле с type=’date’, в плагине например так

[date date-100 placeholder «Дата»]

то поле нормально отображается, вот только плейсхолдер не выводится, и кстати сам календарь тоже нормально отображается впритык к полю ввода, но после выбора даты, она коверкается, тоесть меняется формата даты.

Чтоб вывести в плейсхолдер текст ‘Дата’, пришлось схитрить, взять вместо поля с типом date, текстовое поле (type=’text’), но календаря нет, по этому навешиваю на поле скрипт вывода календаря.

С начало подключаем скрипты

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

Потом инициализируем датапикер и навешиваем на поле ввода

<script>
jQuery(function($){
  $.datepicker.regional['ru'] = {
    closeText: 'Закрыть',
    prevText: 'Предыдущий',
    nextText: 'Следующий',
    currentText: 'Сегодня',
    monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
    monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
    dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
    dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
    dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
    weekHeader: 'Не',
    dateFormat: 'dd.mm.yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };
  $.datepicker.setDefaults($.datepicker.regional['ru']);

  $(".rain-datapic").datepicker({
	minDate: 0
  });
});
</script>

После этих махинаций, поле отображается как надо (заказчику), но сам календарь (datapicker) вываливается слишком далеко от поля ввода

Что бы исправить это, добавлен скрипт, который изменяет стиль Top

Привожу полный код

<script>
jQuery(function($){
  $.datepicker.regional['ru'] = {
    closeText: 'Закрыть',
    prevText: 'Предыдущий',
    nextText: 'Следующий',
    currentText: 'Сегодня',
    monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
    monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
    dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
    dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
    dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
    weekHeader: 'Не',
    dateFormat: 'dd.mm.yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };
  $.datepicker.setDefaults($.datepicker.regional['ru']);

  $(".rain-datapic").datepicker({
	minDate: 0
  });
	
  $(".rain-datapic").on('click', function(){
    $(this).offset().top <= uiDatepickerDiv.offset().top ? uiDatepickerDiv.css('top', $(this).offset().top+20) : uiDatepickerDiv.css('top', $(this).offset().top-20);
  });	
});
</script>