jquery从2个输入和显示中获取总天数 [英] Jquery get total days from 2 inputs and display

问题描述

我有两个输入日期如11/04/2010（即时通讯使用jQuery日期选择器）

我想计算并显示天数在这两个日期之间以及将总天数乘以一个设定数字的价值，例如130美元。

我的下面的布局就像是5天和125美元代表计算结果：

 < ol> 
< li>< label for =start-date>开始日期：< / label> 
< input name =start-dateid =start-dateclass =date-pick dp-applied>< / li> 
< li>< label for =end-date>结束日期：< / label>< input name =end-dateid =end-dateclass =date-挑>< /锂> 
< li>< label for =book_days>天数：< / label>< p> 5天< / p>< / li> 
< li>< label for =book_price>总价：< / label>< p> $ 125< / p>< / li> 
< / ol> 
  

解决方案

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

 <醇> 
< li>< label for =start-date>开始日期：< / label> 
< input name =start-dateid =start-dateclass =date-pick dp-applied>< / li> 
< li>< label for =end-date>结束日期：< / label>< input name =end-dateid =end-dateclass =date-挑>< /锂> 
< li>< label for =book_days>天数：< / label>< p id =book_days> 5天< / p>< / li> 
< li>< label for =book_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价格= calcPrice（天）
 
 $（'＃book_days'）。html（天+天）
 $（'＃book_price'）。html（$+ price） 
} 
}）; 
 
函数parseDate（s）{
 // TODO特定于语言环境的解析，例如http://www.datejs.com/ 
 var parts = s.split（'/'）
返回新日期（零件[2]，零件[0] -1，零件[1]） 
} 
 
函数calcDaysBetween（startDate，endDate）{
 return（endDate-startDate）/（1000 * 60 * 60 * 24）
} 
 
函数calcPrice（天）{
返回天数* 5; 
} 
  

I have two inputs which take a date such as 11/04/2010 (im using a jquery datepicker)

I want to calculate and display the number of days between the two dates as well as the value of multiplying the total days with a set number i.e $130.

My following layout is like so where "5 days" and "$125" represent the results calculated:

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

解决方案

Check out this fiddle: 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>

Note: I've added id attributes for "book_days" and "book_price"

$('#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;
}

这篇关于jquery从2个输入和显示中获取总天数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！