使用 jQuery UI datepicker 显示总天数

Question

我正在使用jQuery ui datepicker 并应用了这样的日期格式

2016 年 4 月 30 日，星期三

这里是代码

HTML

<input type="text" id="closedate">

jQuery

$(document).ready(function() {
    $("#closedate").datepicker({ dateFormat: 'DD, d MM, yy' });
});

现在如何在我的输入中像这样从当前日期添加天数？

2016 年 4 月 30 日，星期三（3 天）

括号中的 3 天是从当前日期算起

Answer 1

您计算日期选择器输入的更改事件。

查看示例代码：

$('#date1').change(function() {
    var diff = new Date() - $('#date1').datepicker("getDate");
    $('#diff').text(Math.floor(diff / (1000*60*60*24) * -1) + 1);
});

看看它的工作原理：

https://jsfiddle.net/ddan/jvxz6g4c/

编辑

您发表评论后的编辑版本：

添加了一些额外的字符串格式和日期工具：

$('#date1').change(function() {
    var pickedDate = $('#date1').datepicker("getDate");
    var diff = new Date() - $('#date1').datepicker("getDate");
    var dayDiff = Math.floor(diff / (1000*60*60*24) * -1) + 1;

    $('#pickedDate').text(getDatStr(pickedDate));
    $('#diff').text('(' + dayDiff + ' Days )');
});

var monthNames = [
  "January", "February", "March",
  "April", "May", "June", "July",
  "August", "September", "October",
  "November", "December"
];

var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

function getDatStr(date) {
  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();
  var dayOfWeek = date.getDay();

  return days[dayOfWeek] + ', ' + day + ' ' + monthNames[monthIndex] + ', ' +  year;
}

看看它的工作原理：

https://jsfiddle.net/ddan/jvxz6g4c/2/

编辑

基于评论的小修改

https://jsfiddle.net/ddan/jvxz6g4c/4/

稍微靠近一点：https://jsfiddle.net/ddan/jvxz6g4c/6

Answer 2

只是在answer 的基础上加上DDan 提供的

使用onSelect 事件，你可以使用formatted 由提供的格式化程序框定的值。

$(document).ready(function() {
  $("#closedate").datepicker({
    dateFormat: 'DD, d MM, yy',
    onSelect: function(a, b) {
      var diff = new Date() - $(this).datepicker("getDate");
      diff = Math.floor(diff / (1000 * 60 * 60 * 24) * -1) + 1;
      var value = a + '(' + diff + ' days)'
      $(this).val(value);
    }
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<input type="text" id="closedate" size='50'>

Fiddle demo

Answer 3

这可能会有所帮助：Get difference between 2 dates in javascript?

本质上是将日期选择器返回的值转换为标准的 JS 日期。

var date1 = new Date("7/13/2010");
var date2 = new Date("12/15/2010");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
alert(diffDays);

Answer 4

代码： https://jsfiddle.net/5pr7uhc0/

<div class="form-group">
    <label class="control-label col-sm-2" for="date">Date:</label>
    <div class="col-sm-5">
        <input id="date1" value="Pick Date" type="button" class="form-control btn btn-default" name="training_start_date" value=""> 
    </div>
</div>
<br>
<span id="pickedDate">  </span>  <span id='diff'>  </span>

jquery：

$('#date1').datepicker({ dateFormat: 'DD, d MM, yy' });

$('#date1').change(function() {
    var date = $(this).datepicker('getDate');
    var today = new Date();
    var dayDiff = Math.ceil((today - date) / (1000*60*60*24) * -1);
    $('#date1').val($.datepicker.formatDate('DD, d MM, yy', date) + ' ( ' + dayDiff + ' Days )');
});

刚刚从@DDan 清理了代码。