JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<div class="container">
      <label for="checkindate">入住日期</label>
      <input
        type="text"
        id="checkindate"
        class="date"
        placeholder="2023/03/20"
      />
      <br />
      <label for="checkoutdate">退房日期</label>
      <input
        type="text"
        id="checkoutdate"
        class="date"
        placeholder="2023/03/20"
      />
    </div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
}

label,
input {
  width: 8rem;
  margin: 0.2rem;
}

.container {
  width: 100%;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

JavaScript

jQuery.datetimepicker.setLocale("zh-TW");
jQuery(".date").datetimepicker({
  timepicker: false,
  format: "Y/m/d",
  minDate: 0,
});