Jquery 从 2 个输入中获取总天数并显示答案

【问题标题】：Jquery get total days from 2 inputs and displayJquery 从 2 个输入中获取总天数并显示
【发布时间】：2011-09-30 07:52:00
【问题描述】：

我有两个输入日期，例如 11/04/2010（我使用 jquery datepicker）

我想计算并显示两个日期之间的天数，以及将总天数乘以一个设定的数字（即 130 美元）的值。

我的以下布局是这样的，其中“5 天”和“125 美元”代表计算结果：

<ol>
<li><label for="start-date">Start Date:</label>
<input name="start-date" id="start-date" class="date-pick dp-applied"></li>
<li><label for="end-date">End Date:</label><input name="end-date" id="end-date" class="date-pick"></li>
<li><label for="book_days">Days:</label><p>5 days</p></li>
<li><label for="book_price">Total Price:</label><p>$125</p></li>
</ol>

【问题讨论】：

那么，这有什么问题呢？你只是解释了一些东西，但你什么都没问:)
我已经将日期和总价硬编码到上面我不想要的代码中。我想让 jquery 计算它。
我是说什么时候？在您的日期字段的blur 上？还是点击按钮？
当用户完成更改结束日期时。
感谢您的输入，我的日期格式为日/月/年，但对下面的代码进行简单更改，就像这样对我有用。返回新日期（mdy[2]，mdy[1]-1，mdy[0]）；如果可以的话，我会投票给每个人。

标签： jquery forms select input

【解决方案1】：

这样试试

function GetCost()
{
   var days=daydiff(parseDate($('#start-date').val()), parseDate($('#end-date').val()));

   var cost = days*130;

   return cost;  
}


function parseDate(str) {
    var mdy = str.split('/')
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
}

function daydiff(first, second) {
    return (second-first)/(1000*60*60*24)
}

请查看 SOlink

【讨论】：

【解决方案2】：

看看这个小提琴：http://jsfiddle.net/timbuethe/hD25E/

<ol>
<li><label for="start-date">Start Date:</label>
<input name="start-date" id="start-date" class="date-pick dp-applied"></li>
<li><label for="end-date">End Date:</label><input name="end-date" id="end-date" class="date-pick"></li>
<li><label for="book_days">Days:</label><p id="book_days">5 days</p></li>
<li><label for="book_price">Total Price:</label><p id="book_price">$125</p></li>
</ol>

注意：我为“book_days”和“book_price”添加了 id 属性

$('#start-date, #end-date').change(function(){

    if($('#start-date').val() && $('#end-date').val()){

        var startDate = parseDate($('#start-date').val())
        var endDate = parseDate($('#end-date').val())
        var days = calcDaysBetween(startDate, endDate)
        var price = calcPrice(days)

        $('#book_days').html(days + " days")    
        $('#book_price').html("$" + price)
    }
});

function parseDate(s){
    // TODO locale specific parsing here, e.g. http://www.datejs.com/
    var parts = s.split('/')
    return new Date(parts[2], parts[0]-1, parts[1])
}

function calcDaysBetween(startDate, endDate){
    return (endDate-startDate)/(1000*60*60*24)
}

function calcPrice(days){
    return days * 5;
}

【讨论】：

嗨，当我添加以下日期作为输入 08/07/2011 - 09/07/2011 我得到了。天数：31 天总价：155 美元
啊 nvm 我猜日期中的第一个值是月份。不是那天。
是的，如您所见，Date 构造函数按以下顺序获取部分：new Date(parts[2], parts[0]-1, parts[1])（第二个参数递减，因为在 JavaScript 和 Java 中月份从 0 开始）。如果您必须解析不同格式的日期，我建议您为此使用库，例如datejs.com.