Jquery get total days from 2 inputs and display

Question

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>

So, what's wrong with this? You just explained something, but you didn't ask anything :) — Saeed Neamati, Jul 07 '11 at 10:02
Ive hard coded the day and total price into the code above which I dont want. I want jquery to calculate it. — Peter, Jul 07 '11 at 10:30
I meant when? On `blur` of your date fields? or on click of a button? — Saeed Neamati, Jul 07 '11 at 10:35
Appreciate the input, my dates are formatted as day/month/year but a simple change of the code below like so works for me. return new Date(mdy[2], mdy[1]-1, mdy[0]); I would vote everyone up if i could. — Peter, Jul 07 '11 at 21:30

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

try like this

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

Please check the SO link

edited May 23 '17 at 11:55

Community

1
1

answered Jul 07 '11 at 10:06

Mahesh KP

6,248
13
50
71

Tim Büthe · Accepted Answer · 2011-07-08T08:11:22.383

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

Hi when I add the following dates as input 08/07/2011 - 09/07/2011 I get. Days: 31 days Total Price: $155 — Peter, Jul 07 '11 at 20:29
Ah nvm im guessing the first value in the date is the month. Not the day. — Peter, Jul 07 '11 at 21:11
Yes, as you can see, the Date constructor get the parts in the following order: `new Date(parts[2], parts[0]-1, parts[1])` (The second parameter is decremented because months start at 0 in JavaScript as well as in Java). If you have to parse dates in different formats, I would recommend to use a library for that, e.g. http://www.datejs.com. — Tim Büthe, Jul 08 '11 at 08:14

Jquery get total days from 2 inputs and display

2 Answers2

Linked