javascript - 使用 jQuery UI datepicker 显示天总数

Question

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

Wednesday, 30 April, 2016

这是代码

HTML

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

jQuery

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

现在如何在我的输入中添加从当前日期算起的天数？

Wednesday, 30 April, 2016 (3 Days)

括号中的 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