JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="./style/text.css">
<script src="https://kit.fontawesome.com/41e2a8dba7.js" crossorigin="anonymous"></script>
<div class="main">
   <div class="date">
      <i class="fa-regular fa-calendar"></i>
      <label type="text" placeholder="選擇日期">
         <span>入住</span>
         <input id="datetimepickerGo" placeholder="選擇日期">
      </label>
   </div>

   <div class="date">
      <i class="fa-regular fa-calendar"></i>
      <label type="text" placeholder="選擇日期">
         <span>退房</span>
         <input id="datetimepickerBack" placeholder="選擇日期">
      </label>
   </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
}
.main .date {
  border: 1px solid black;
  border-radius: 5px;
  margin: 0.5rem;
  padding: 0 2.5rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.main .date i {
  margin-right: 0.75rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
.main .date label {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}
.main .date label span {
  font-size: 0.8rem;
}
.main .date label input {
  border: none;
  text-align: start;
  width: 150px;
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
  background-color: white;
  font-size: 1.1rem;
  color: rgb(102, 102, 102);
}
.main .date label input:hover {
  cursor: pointer;
}

JavaScript

$('#datetimepickerGo').datetimepicker({
   format:'Y/m/d',
   timepicker: false,
   minDate: 0,
});

$('#datetimepickerBack').datetimepicker({
   format:'Y/m/d',
   timepicker: false,
   minDate: 0,
});