前提・実現したいこと

表題の通り、カレンダーを表示させたい

ご教授いただけると幸いです！

発生している問題・エラーメッセージ

「日付を選択してください」のinputをクリックしても、非表示

試したこと

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title></title>
8    <!--flatpicker-->
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
10    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
11    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script><!-- 日本語化 -->
12    <link rel="stylesheet" href="./css/style.css">
13    
14</head>
15<body>
16
17 <div class="modal js-modal">
18            <div class="modal__bg js-modal-close"></div><!-- /.modal__bg -->
19            <div class="js-modal-content">
20                <div class="form-inner">
21                    <figure class="form_img" id="js-close-calender">
22                        <!-- <img src="./img/close@2x.png" alt="✖ボタン"> -->
23                    </figure><!-- /#js-close-calender -->
24                    <h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl --> 
25                    <hr class="bar">
26                <!-- modal-form -->
27                <form class="form" id="js-form" action="x">
28                        <ul class="form-list">
29                            <!--1-->
30                            <li class="form-item">
31                                <label for="name">お名前</label>
32                                <input type="text" name="name" class="form_txt" placeholder="例.石井花壇">
33                            </li><!-- /.form-item -->
34                                <!--2-->
35                            <li class="form-item">
36                                <label for="mail">メールアドレス</label>
37                                <input type="text" name="name" class="form_txt" placeholder="例.example@example.com">
38                            </li>
39                                <!--3-->
40                            <li class="form-item">
41                            <p class="form-plan">ご希望プラン(空いているプランのみ表示されます)</p><!-- /.form-plan -->
42                                <select class="select-plan" name="宿泊プラン">
43                                    <optgroup>
44                                        <option class="form_opption" value="hidden selected">プランを選択してください</option>
45                                        <option class="form_opption" value="1">➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option><!-- /.form_opption -->
46                                        <option class="form_opption" value="2">➁平日に優雅に楽しむ、特別宿泊プラン</option><!-- /.form_opption -->
47                                        <option class="form_opption" value="3">➂絶景貸切露天と個室会席を楽しむファミリープラン</option><!-- /.form_opption -->
48                                    </optgroup>
49                                </select><!-- /# -->
50                            </li><!-- /.form-item -->
51                            <!--4-->
52                            <li class="form-item">
53                                <label for="js-flatpickr">日時選択</label></li><!-- /.form-item -->
54                                <input　id="js-flatpickr" class="calendar" data-mindate=today type="text" name="name" placeholder="日時を選択してください">
55                                </li>
56                        </ul><!-- /.form-list -->
57                    </div><!-- /.form-inner -->
58                </form><!-- /.form -->
59                <div class="form-close">
60                    <a href="#">
61                        送信する
62                    </a>
63                </div><!-- /.form-close -->
64  </div><!-- /.modal-contents -->
65        </div><!-- /.modal -->
66
67 <script>flatpickr("#flatpickr",{locale:"ja"});</script>
68 <script src="js/script.js"></script>
69</body>
70</html>

css
1
2.modal {
3  display: none;
4  height: 100%;
5  position: fixed;
6  top: 0;
7  left: 0;
8  width: 100%;
9  z-index: 3;
10}
11
12.js-modal {
13  /* display: block;
14    width: calc(550 /1920*100%);
15    height: calc(600/1080*100%);
16    background-color: #fff;
17    position: absolute;
18    top: 50%;
19    left: 50%;
20    margin-right: 20px;
21    border: 1px solid #707070;
22    transform: translate(-50%,-50%);
23    z-index: 100; */
24}
25
26.js-modal .modal__bg {
27  background: rgba(0, 0, 0, 0.6);
28  height: 100%;
29  position: absolute;
30  width: 100%;
31}
32
33.js-modal .js-modal-content {
34  background: #fff;
35  padding: 40px;
36  position: absolute;
37  top: 50%;
38  left: 50%;
39  -webkit-transform: translate(-50%, -50%);
40          transform: translate(-50%, -50%);
41  width: 60%;
42  position: relative;
43}
44
45@media screen and (max-width: 599px) {
46  .js-modal .js-modal-content {
47    width: 95%;
48    padding: 20px;
49  }
50}
51
52@media screen and (min-width: 1180px) {
53  .js-modal .js-modal-content {
54    width: 28%;
55    min-width: 550px;
56    padding: 20px 60px 90px 60px;
57  }
58}
59
60.form-inner .form_img {
61  width: 18px;
62  height: 18px;
63}
64
65.form-inner h2 {
66  font-size: 2rem;
67  text-align: center;
68  padding: 10px;
69}
70
71.form {
72  margin-top: 28px;
73}
74
75.form-list .form-item input {
76  border: 1px solid #E7E7E7;
77  padding: 0 10px;
78  width: 100%;
79  line-height: 1;
80  color: #797878;
81  height: 32px;
82  margin-top: 10px;
83}
84
85.form-list .form-item select {
86  border: 1px solid #E7E7E7;
87  padding: 0 10px;
88  width: 100%;
89  line-height: 1;
90  color: #797878;
91  height: 32px;
92  margin-top: 10px;
93}
94
95.form-close {
96  text-align: center;
97}
98
99.form-close > a {
100  display: inline-block;
101  width: 198px;
102  margin-top: 64px;
103  border: 1px solid #000;
104  text-align: center;
105  padding: 13px;
106  line-height: 1;
107  -webkit-transition: .3s;
108  transition: .3s;
109}