JavaScript 系列四：第5課

── xdan/datetimepicker 套件

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列四：第5課 ── xdan/datetimepicker 套件</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
    <link rel="stylesheet" href="./05_js_datetimepicker.css">
</head>
<body>
    <div class="container">
        <div class="checkin_date">
            <p>Days for booking</p>
            
            <input id="date_timepicker_start" type="text" placeholder="From">
            <span>⟶</span>
            <input id="date_timepicker_end" type="text" placeholder="To">
        </div>
        <div class="selected_date">
            <p class="display_dates" id="display_dates">
                <span>Check in: </span>
                <span id="from"></span>
                <span>Check out: </span>
                <span id="to"></span>
                <span> Total:</span>
                <span id="days"></span>
                <!-- <span> Days  </span> -->
                <span id="nights"></span>
                <span> Nights</span>
            </p>
        </div>
        <div class="error_msg">
            Please enter the current date.
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <script src="./05_js_datetimepicker.js"></script>
</body>
</html>

CSS

*{
    margin:0;
    padding: 0;
    list-style: none;
    font-size: 18px;
}

.container{
    margin: 20px;
    line-height: 2.5em;
}
.checkin_date{
    width: 500px;
    border-bottom: 4px solid #9EBF17;
    border-right: 60px solid #9EBF17;
    border-radius: 5px;
}
.checkin_date p{
    font-size: 24px;
    color: #aaa;
}
.checkin_date input{
    color: #2D2D2D;
    line-height: 2;
    padding-left: 5px;
    border: 1px solid #aaa;
    border-radius: 5px;
}
.selected_date{
    display: none;
}

.display_dates span{
    color: #aaa;
}
#from{
    color:#2D2D2D
}
#to{
    color:#2D2D2D
}
#days{
    display: none;
    color:red;
}
#nights{
    color:#FF3636;
}
.error_msg{
    display: none;
    width: 500px;
    color:red;
    background: rgba(217, 111, 111, 0.756);
    border: 1px solid red;
    padding: 0 5px;
}

JavaScript

var today = new Date();
var todayFormatted = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate();
var startDate = $('#date_timepicker_start').val();
var endDate = $('#date_timepicker_end').val();

$('#date_timepicker_start').datetimepicker({
    format: 'Y/m/d',
    minDate: todayFormatted, // Set minimum date to today
    onShow: function(ct) {
        this.setOptions({
            maxDate: $('#date_timepicker_end').val() ? $('#date_timepicker_end').val() : false
        });
    },
    timepicker: false,
    onSelectDate: function(ct, $i) {
        $('.error_msg').hide();
        updateDateDisplay();

    }
});

$('#date_timepicker_end').datetimepicker({
    format: 'Y/m/d',
    minDate: todayFormatted, // Set minimum date to today
    onShow: function(ct) {
        this.setOptions({
            minDate: $('#date_timepicker_start').val() ? $('#date_timepicker_start').val() : todayFormatted
        });
    },
    timepicker: false,
    onSelectDate: function(ct, $i) {
        $('.error_msg').hide();
        updateDateDisplay();

    }
});

//秀出天數 
function updateDateDisplay() {
    var startDate = $('#date_timepicker_start').val();
    var endDate = $('#date_timepicker_end').val();

    if (startDate && endDate) {
        var daysCount = calculateDaysDifference(startDate, endDate);
        $('#from').text(startDate);
        $('#to').text(endDate);
        $('#days').text(daysCount);
        $('#nights').text((daysCount-1));
        $('.selected_date').show();

    }

}
//計算天數
function calculateDaysDifference(start, end) {

    if (!start || !end) {
        return '';
    }
    var startDate = new Date(start);
    var endDate = new Date(end);
    var timeDiff = endDate.getTime() - startDate.getTime();
    var daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24))+1;
    return daysDiff;
}

 // 将日期字符串转换为 Date 对象并格式化
function parseAndFormatDate(dateStr) {
    var parts = dateStr.split('/');
    
    // 检查日期格式是否正确
    if (parts.length !== 3) {
  ...