ContactForm7でお問い合わせフォーム作成中　カレンダー部分をdatepickerで実装したいです。

【教えてもらいたいこと】
プログラミング

【具体的な相談内容】
下記まで記載したのですが、レイアウトも崩れてしまい、対応方法を調べている時間がないので詳しい方にサポートしていただきたいです。


〜〜〜ContactForm7コード〜〜〜
<div class="form_reservation">
<div class="form_reservation_Date">
<div class="reservation-text-Date">ご予約日</div>
[text date id:datepicker]
</div>

<div class="form_reservation_Time">
<div class="reservation-text-Time">ご予約時間</div>
[select menu-time include_blank "00:00" "1:00" "2:00" "3:00" "4:00" "5:00" "6:00" "7:00" "8:00" "9:00" "10:00"
"11:00" "12:00" "13:00" "14:00" "15:00" "16:00" "17:00" "18:00" "19:00" "20:00" "21:00" "22:00" "23:00" ]
</div>
</div>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

〜〜〜〜〜VSCコード〜〜〜〜〜
(jsファイル)
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
closeText: "閉じる",
prevText: "<前",
nextText: "次>",
currentText: "今日",
monthNames: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
monthNamesShort: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
dayNames: [
"日曜日",
"月曜日",
"火曜日",
"水曜日",
"木曜日",
"金曜日",
"土曜日"
],
dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
weekHeader: "週",
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "年",
firstDay: 1, // 週の初めは月曜
showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
});

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
【目安予算】
1000円