update

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5505
+  "liveServer.settings.port": 5506
 }

css/style.css

@@ -744,6 +744,7 @@
   border-radius: 0.25rem;
   text-align: center;
   vertical-align: middle;
+  border: 1px solid #f4c0d0;
 }
 
 .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton:hover {

css/style.scss

@@ -755,6 +755,7 @@ $moblie: 767px;
       border-radius: 0.25rem;
       text-align: center;
       vertical-align: middle;
+      border: 1px solid $subcolor;
       &:hover {
         color: $subcolor;
         background-color: #fff;

index.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
   <!-- Add the slick-theme.css if you want default styling -->
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
   <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
   <!-- <link rel="stylesheet" href="/assets/css/swiper.min.css"> -->
   <!-- <link rel="stylesheet" type="text/css" href="css/slick.css" />
@@ -758,7 +759,7 @@
                   <option value="五行水晶能量岩盤浴 /40分">五行水晶能量岩盤浴 /40分</option>
                 </select>
                 <input name="bookdate" class="datepicker" type="date" id="datepicker" placeholder="預選裝修日期" required>
-                <input name="booktime" class="time" type="time" id="time" placeholder="想要體驗的時間" required min="10:30" max="18:30">
+                <input name="booktime" class="time timepicker" type="text" id="time" placeholder="想要體驗的時間" required>
                 <div class="form-btn">
                   <button class="btn submitbutton" style="opacity: 1;" type="submit">立即預約&nbsp;&nbsp;></button>
                 </div>
@@ -1022,7 +1023,7 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
-
+  <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
   <script async defer src="js/index.js"></script>
 </body>
 

js/index.js

@@ -499,6 +499,17 @@ $(".violetbeauty_contract_form").submit(function (e) {
 });
 
 
+$(".timepicker").timepicker({
+  timeFormat: "h:mm p", // 時間隔式
+  interval: 30, //時間間隔
+  minTime: "10:30am", //最小時間
+  maxTime: "18:30pm", //最大時間
+  defaultTime: "10:30", //預設起始時間
+  startTime: "10:00", // 開始時間
+  dynamic: true, //是否顯示項目，使第一個項目按時間順序緊接在所選時間之後
+  dropdown: true, //是否顯示時間條目的下拉列表
+  scrollbar: true, //是否顯示捲軸
+});
 
 
 

reserve.html

@@ -22,6 +22,8 @@
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
   <!-- Add the slick-theme.css if you want default styling -->
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
+
   <!-- fontawesome -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
     integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
@@ -155,7 +157,7 @@
                   <option value="五行水晶能量岩盤浴 /40分">五行水晶能量岩盤浴 /40分</option>
                 </select>
                 <input name="bookdate" class="datepicker" type="date" id="datepicker" placeholder="預選裝修日期" required>
-                <input name="booktime" class="time" type="time" id="time" placeholder="想要體驗的時間" required min="10:30" max="18:30">
+                <input name="booktime" class="time timepicker" type="text" id="time" placeholder="想要體驗的時間" required>
                 <div class="form-btn">
                   <button class="btn submitbutton" style="opacity: 1;" type="submit">立即預約
                     ></button>
@@ -296,6 +298,7 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
 
   <script async defer src="js/index.js"></script>
 </body>