2013-01-10 194 views
3

美好的一天,如何使用jQuery ui datepicker计算今天的天数?

从jQuery datepicker中选择日期后,我计算从现在到选定日期的天数有点麻烦。

我认为datepicker正在改变选择日期的日期格式,并导致计算出错,但我不能完全弄清楚如何解决这个问题。我相信这是我,但我不能看到树木的森林,所以任何建议将是非常有益的。

下面是代码:

<input type="text" class="datepicker-calc" /> 
<input type="text" id="tbAddDays" /> 
$(document).ready(function() { 
    $(".datepicker-calc").datepicker({ 
     dateFormat: "dd/mm/yy", 
     changeMonth: true, 
     changeYear: true, 
     onSelect: function (date, e) { 
      var expDate = new Date(date); 
      var date = e.selectedDay; 
      if (date < 10) { 
       date = ("0" + e.selectedDay) 
      } 
      var month = e.selectedMonth; 
      if (month < 10) { 
       month = ("0" + e.selectedMonth) 
      } 
      var year = e.selectedYear; 
      var endDate = month + "/" + date + "/" + year; 
      updateDays(endDate, e); 
      $(".datepicker-calc").datepicker("hide"); 
     } 
    }); 

    function treatAsUTC(date) { 
     var result = new Date(date); 
     result.setMinutes(result.getMinutes() - result.getTimezoneOffset()); 
     return result; 
    } 

    function updateDays(expDate, e) { 
     var now = new Date(); 
     var startDate = now.toDateString('dd/MM/yyyy'); 
     var exp = new Date(expDate); 
     var endDate = exp.toDateString('dd/MM/yyyy'); 
     var millisecondsPerDay = 24 * 60 * 60 * 1000; 
     var totalDays = (treatAsUTC(endDate) - treatAsUTC(startDate))/millisecondsPerDay; 
     $('#tbAddDays').val(totalDays); 
    } 
}); 

回答

0

意识到,我所需要的显示是在jQuery的DD/MM/YY(日/月/年)格式,以便保持其与做了一些操作来将expDate传递给updateDays()方法以确保待计算的日期将由JS正确处理。

工作脚本:

$(".datepicker-calc").datepicker({ 
     dateFormat: "dd/mm/yy", 
     changeMonth: true, 
     changeYear: true, 
     onSelect: function (selectdate, e) { 
     var newDate = selectdate.slice(0,2); 
     var newMonth = selectdate.slice(4,6); 
     if (newMonth < "10") { newMonth = ("0" + newMonth.slice(0,1));}; 
     var newYear = selectdate.slice(6,11); 
     var expDate = newMonth + "/" + newDate + "/" + newYear; 
     updateDays(expDate, e); 
     $(".datepicker-calc").datepicker("hide"); 
    } 
}); 

function treatAsUTC(date) { 
    var result = new Date(date); 
    result.setMinutes(result.getMinutes() - result.getTimezoneOffset()); 
    return result; 
} 

function updateDays(expDate, e) { 
    var now = new Date(); 
    var startDate = now.toDateString('dd/MM/yyyy'); 
    var expire = new Date(expDate); 
    var endDate = expire.toDateString('dd/MM/yyyy'); 
    var millisecondsPerDay = 24 * 60 * 60 * 1000; 
    var totalDays = (treatAsUTC(endDate) - treatAsUTC(startDate))/millisecondsPerDay; 
    $('#tbAddDays').val(totalDays); 
} 
2

onSelect事件将在指定的格式,这是dd/mm/yy接收的字符串。 JavaScript Date.parse方法会错误地解析这些日期,或根本不解析它们。的解决方案是使用parseDate()功能构建到jQuery用户界面:

onSelect: function (dateText, inst) { 
    var expDate = $.datepicker.parseDate(inst.settings.dateFormat, dateText, inst.settings); 
    var diff = expDate - new Date(); 
    var days = diff/1000/60/60/24; 
    alert(/* ceil, floor, round */ days); 
} 
+0

感谢我指出了正确的方向。由于我要求日期格式在日期选择器字段中以dd/mm/yyy显示,因此我在日期上实施了分片解决方案,并将其拆分为mm/dd/yyyy格式以运行计算。 添加到帖子中的解决方案。 – badstyle

+0

有一个$ .datepicker.formatDate函数与parstDate相反,你会发现它很有用。 –

相关问题