JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.9/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.7.1.js"integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.9/jquery.datetimepicker.full.min.js" integrity="sha512-hDFt+089A+EmzZS6n/urree+gmentY36d9flHQ5ChfiRjEJJKFSsl1HqyEOS5qz7jjbMZ0JU4u/x1qe211534g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form>
<fieldset class="fieldset_frame">
<legend>訂房日期</legend>
<div><input id="datetimepicker_in" class="chinput in" type="text" placeholder="入住日期 --/--/--"></div>
<div><input id="datetimepicker_out" class="chinput out" type="text" placeholder="退房日期 --/--/--"></div>
<div><input class="btn" type="button" value="訂房"></div>
</fieldset>
</form>
CSS
.fieldset_frame{
width: 600px;
height: 100px;
display: flex;
justify-content:space-evenly;
align-items: center;
font-family: Comic Sans MS , Microsoft JhengHei;
border: 2px dashed rgb(255, 131, 131);
border-left: 3px solid rgb(122, 153, 255);
}
.fieldset_frame legend{
font-size: 28px;
}
.chinput{
width: 242px;
height: 30px;
font-family: Comic Sans MS , Microsoft JhengHei;
box-sizing: border-box;
text-indent: 5px;
}
.btn{
width: 50px;
height: 30px;
}
JavaScript
$.datetimepicker.setLocale('zh-TW');
$('#datetimepicker_in,#datetimepicker_out').datetimepicker({
i18n: {
de: {
months: [
'Januar', 'Februar', 'März', 'April',
'Mai', 'Juni', 'Juli', 'August',
'September', 'Oktober', 'November', 'Dezember',
],
dayOfWeek: [
"So.", "Mo", "Di", "Mi",
"Do", "Fr", "Sa.",
]
}
},
timepicker: false,
format: 'Y/m/d'
});