Jquery UI Datepicker - 选择时间段时显示天数

Question

To select a date range, I use the Jquery UI Datepicker plugin. I use a code that should show the number of days when choosing a period.

To connect the plugin, I use 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 Code:

<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>

Plugin Initialization:

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)
}

Unfortunately, this code for some reason does not show the number of days when choosing a period. It is necessary, for example, to show "You have chosen - 5 days."

How to fix the code so that everything works? Need your help! Thanks!

Answer 1

The #days is an input element which doesn't have any HTML content appending doesn't make any change in the value. To make it work use val() method.

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>