datepikerのカレンダーをモーダルウィンドウで表示したい

前提・実現したいこと

jqueryのdatepikerを使用して、モーダルウィンドウにてカレンダーを表示させたいと思っています。
カレンダーアイコン押下→モーダルウィンドウでカレンダー表示→選んだ日付がテキストボックスに入力

現在、datepikerでカレンダーをテキストボックスの下に入力することはできていますが、モーダルウィンドウでの表示が上手くいきません。（表示したい箇所：class='modal'）
どうしてもカレンダー部の要素がhtmlでの表示箇所がhtml下部になってしまうので、そもそもhtmlのソースを表示する個所を指定できるのでしょうか。
また、アイコンを押した後にモーダルウィンドウにてカレンダー表示できるのでしょうか。
教えていただけますと幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6        <meta name="description" content="勉強用カレンダーページです。">
7        <title>カレンダーページ</title>
8        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
9        <link rel="stylesheet" type="text/css" href="index.css">
10        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
11        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
12    </head>
13    <body>
14        <div class="contents">
15            <div class="calendar">
16                <input type="text" name="datepicker" class="datepicker" value="">
17                <div class="calendar__modal">
18                    
19                </div>
20            </div>
21        </div>
22        <script type="text/javascript" src="./js/index.js"></script>
23    </body>
24</html>

css
1@charset "UTF-8";
2
3* {
4  padding: 0;
5  margin: 0;
6}
7body {
8  color: #333;
9  letter-spacing: 1px;
10}
11.contents {
12  width: calc(100% - 4%);
13  margin: 4% 2%;
14}
15.calendar {
16    display: flex;
17    align-items: flex-end;
18    margin-top: 2%;
19}
20.datepicker {
21    height: 4vh;
22    width: 20%;
23    margin-left: 1%;
24}
25.ui-datepicker-trigger {
26    width: 5vh;
27}

jquery
1$(function() {
2  $('.datepicker').datepicker({
3    buttonImage: "./common/img/calendar.png",  // カレンダーアイコン画像
4    buttonText: "カレンダーから選択",  // アイコンホバー時の表示文言
5    buttonImageOnly: true, // ボタンとして表示
6    showOn: "both",  // アイコン、テキストボックスどちらをクリックでもカレンダー表示
7    beforeShow: function(input, inst){
8       inst.dpDiv.css({top: 50 + '%', left: 50 + '%'});
9    }
10  });
11});

試したこと

検索にてカレンダーの位置を移動できるとの情報を得たので、下記のソースをjqueryにて追記してみましたが、うまく該当の要素のstyleに適用されなかったです...
beforeShow: function(input, inst){
inst.dpDiv.css({top: 50 + '%', left: 50 + '%'});
}

行動規範の内容に同意します

回答1件

自己解決

下記処理で行けました。

jQuery
1$(function() {
2  //datepicker処理
3  $('.datepicker').datepicker({
4    buttonImage: "./common/img/calendar.png",  // カレンダーアイコン画像
5    buttonText: "カレンダーから選択",  // アイコンホバー時の表示文言
6    buttonImageOnly: true, // ボタンとして表示
7    showOn: "both",  // アイコン、テキストボックスどちらをクリックでもカレンダー表示
8    showButtonPanel: true, //閉じるボタンと今日ボタンを表示
9    beforeShow: function (textbox, instance) {
10      $('.appendDatepicker').append($('#ui-datepicker-div'));
11    }
12  });
13  //カレンダーボタンをクリックしたらモーダルウィンドウを表示
14  $('#dpTextbox, .ui-datepicker-trigger').on('click', function(){
15    $('.appendDatepicker').addClass('open');
16  });
17});
18