Jquery UI Datepicker - 選擇時間段時顯示天數

Question

為了選擇日期范圍，我使用了 Jquery UI Datepicker 插件。 我使用的代碼應該在選擇一個時期時顯示天數。

要連接插件，我使用 CDN：

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

HTML代碼：

<form>
    <label>From</label>
    <input id="from" readonly="readonly" name="from" type="text" value="">
    <label>To</label>
    <input id="to" readonly="readonly" name="to" type="text" value="">
    <label>You choosed</label>
    <input id="days" readonly="readonly" name="days" type="text" value=""> days.
</form>

插件初始化：

var from = new Date();
var to = new Date();
var dayDiff = 1;

$(function() {
    var dates = $("#from, #to").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function(selectedDate) {
                    var option = this.id == "from" ? "minDate" : "maxDate",
                            instance = $(this).data("datepicker"),
                            date = $.datepicker.parseDate(
                                    instance.settings.dateFormat ||
                                    $.datepicker._defaults.dateFormat,
                                    selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);

                    if (this.id == "from") {
                            from = $(this).datepicker('getDate');
                            if (!(to == "")) {
                                    update_days()
                            }
                    }
                    if (this.id == "to") {
                            to = $(this).datepicker('getDate');
                            update_days()
                    }
            }
    });
});

function update_days() {
    dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
    $("#days").empty()
    $("#days").append(dayDiff)
}

不幸的是，由於某種原因，此代碼在選擇一個時期時沒有顯示天數。 例如，有必要顯示“您已選擇 - 5 天”。

如何修復代碼以便一切正常？ 需要你的幫助！ 謝謝！

Answer 1

#days是一個沒有附加任何 HTML 內容的input元素，不會對值進行任何更改。 要使其工作，請使用val()方法。

function update_days() {
    dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
    $("#days").val(dayDiff)
}

 var from = new Date(); var to = new Date(); var dayDiff = 1; $(function() { var dates = $("#from, #to").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1, onSelect: function(selectedDate) { var option = this.id == "from" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); dates.not(this).datepicker("option", option, date); if (this.id == "from") { from = $(this).datepicker('getDate'); if (!(to == "")) { update_days() } } if (this.id == "to") { to = $(this).datepicker('getDate'); update_days() } } }); }); function update_days() { dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24)); $("#days").val(dayDiff) }

 <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"></link> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <form> <label>From</label> <input id="from" readonly="readonly" name="from" type="text" value=""> <label>To</label> <input id="to" readonly="readonly" name="to" type="text" value=""> <label>You choosed</label> <input id="days" readonly="readonly" name="days" type="text" value=""> days. </form>