Jquery UI Datepicker - show the number of days when choosing a period

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>