JSFiddle - React, Tailwind, and code Playground

by yoyosan

HTML

<h2>選擇住房與退房日期</h2>

<label for="checkin"><h2>入住日期</h2></label>
<input type="text" id="checkin">
<br><br>


<label for="checkout"><h2>退房時間</h2></label>
<input type="text" id="checkout">







<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" />

JavaScript

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

$('#checkout').datetimepicker({
  format:'Y/m/d',
  timepicker: false,
  minDate: 0,
});
$('#checkin').on('change', function() {
  const checkinDate = $(this).val();
  $('#checkout').datetimepicker('setOptions', { minDate: checkinDate });
});