JSFiddle - React, Tailwind, and code Playground
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.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<h1 style="text-align: center;">JavaScript 系列四:第5課 ── xdan/datetimepicker 套件</h1>
<label for="dateStart">入住日期</label>
<input id="dateStart" type="text" placeholder="請選擇入住日期">
<label for="dateEnd">退房日期</label>
<input id="dateEnd" type="text" placeholder="請選擇退房日期">
JavaScript
$("#dateStart").datetimepicker({
timepicker: false,
format: "Y/M/d",
weeks: true,
onShow: function(ct) {
this.setOptions({
// 最早入住日是今天
minDate: 0,
// 最晚入住日。如果使用者先選了退房日,最晚入住日就是退房前一天。如果沒有先選退房日,最晚入住日就沒限制
maxDate: $("#dateEnd").val() ?
new Date($("#dateEnd").val()).setDate(
new Date($("#dateEnd").val()).getDate() - 1
) :
false
});
}
});
$("#dateEnd").datetimepicker({
timepicker: false,
format: "Y/M/d",
weeks: true,
onShow: function(ct) {
this.setOptions({
// 最早退房日。如果使用者有先選入住日,最早的退房日就是入住隔天。沒有先選入住日的話,最早退房是就是當今日期的隔天
minDate: $("#dateStart").val() ?
new Date($("#dateStart").val()).setDate(
new Date($("#dateStart").val()).getDate() + 1
) :
"+1970/01/02",
// 最晚退房日沒有限制
maxDate: false
});
}
});