JS4-5

by jiaxin520

HTML

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.9/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.9/jquery.datetimepicker.css">
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title> JavaScript Example 4-4</title>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="">
 </head>
 <body>
 <div class='hotel'>民宿的訂房網站</div>
 <div class="checkin">
   <p>入住日期</p>
 <input id="datetimepicker" type="text" >
 </div>
 
  <div class="checkout">
  <p>退房日期</p>
 <input id="datetimepicker1" type="text" placeholder="Y/M/D" >
 </div>
</body>
 <!--引用JS -->
    <script src=""></script>
    <script type="text/javascript" src=""></script>

CSS

*{
    box-sizing: border-box;
}
body{
  width:500px;
display:flex;
flex-direction:column;
align-items:center;
border:1px solid black;
margin:100px;
background-color:rgba(	230, 0, 92,0.1);
font-weight:bold;
border-radius:10px;
}
.hotel{
  margin:30px 0;
  font-size:48px;
}
.checkin{
   font-size:24px;
}
.checkout{
     font-size:24px;
  margin-bottom:40px;
}

JavaScript

jQuery.datetimepicker.setLocale('zh-TW"');

jQuery('#datetimepicker').datetimepicker({
 format:'Y/m/d',
  startDate:'+1971/05/01', //or 1986/12/08
    timepicker: false, // 取消小時
    value: new Date(), // 設定今天日期
       maxDate:0  //只能選今天之前的日期
});
jQuery('#datetimepicker1').datetimepicker({
 format:'Y/m/d',
  startDate:'+1971/05/01', //or 1986/12/08
    timepicker: false, // 取消小時
    minDate:0 // 只能選今天之後的日期

});