时间戳

首页 > 解决方案 > Jquery UI Datepicker - 选择时间段时显示天数

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

问题描述

要选择日期范围，我使用 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 天”。

如何修复代码以使一切正常？需要你的帮助！谢谢！

标签： javascriptjquerydatepickerjquery-ui-datepicker

解决方案

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

推荐阅读