js4-5

by wang_siang

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.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
 <div>
        <label for="date_timepicker_start">入住日期:</label>
        <input id="date_timepicker_start" type="text" readonly>
    </div>
    <div>
        <label for="date_timepicker_end">退房日期:</label>
        <input id="date_timepicker_end" type="text" placeholder="Y/M/D" readonly>
    </div>

CSS

* {
            box-sizing: border-box;
        }

        div {
            margin: 20px 0;
        }

JavaScript

// 設定開始日期與結束日期的連動，根據選擇的開始日期限制結束日期
jQuery(() => {
            const start = $('#date_timepicker_start');
            const end = $('#date_timepicker_end');

            start.datetimepicker({
                format: 'Y/m/d',
                value: new Date(),
                onShow: function (ct) {
                    this.setOptions({
                        maxDate: end.val() ? end.val() : false
                    })
                },
                timepicker: false
            });
            end.datetimepicker({
                format: 'Y/m/d',
                onShow: function (ct) {
                    this.setOptions({
                        minDate: start.val() ? start.val() : false

                    })
                },
                timepicker: false
            });
        });
        
// 設定日期格式，格式為 'Y-m-d' 
// 禁用時間選擇，讓使用者只能選擇日期（timepicker: false）
// 限制可選日期，不能早於 '2025-01-01'（minDate: '2025-01-01'）
// 最大可選日期設定，讓使用者無法選擇超過此日期的時間（maxDate）

// 只能選擇今天以後的日期，設定 minDate 為 0（0 代表今天）
// $("#datetimepicker").datetimepicker({
//     minDate: 0 // 0 代表今天
// });

// 顯示 24 小時制（設定 hours12: false）
// 預設選擇今天，設置 value: new Date() 來顯示當前日期