Date Range Picker - Dynamically change label value based on date and time range

Hello everyone.
So, I am developing a web based application for an airport parking. I am using Twitter bootstrap for the form. To get the date and time range of every enquiry I am using Date Range Picker for Bootstrap. What I would like to do is to dynamically change a label's value called "Total Price" which is found in the booking page based on the Date Range Picker's inputs (located on the top). Browsing their documentation I could not find something similar to my case. The charging rates are 0.01 per hour. For example: In case I am in the process of my enquiry and I choose to drop my car off at Saturday 10 (00:00) and pick it up at Sunday 11 (00:00) the price label should display "24€".

It is my understanding that this might me too much to ask but I tried as far as I could with no result. Thank you in advance.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Probably just a missing bracket - this should do it though
<script type="text/javascript">
$(document).ready(function () {
    
  var select=function(dateStr) {

    var d1 = $('#date1').datepicker('getDate');
    var d2 = $('#date2').datepicker('getDate');
    var diff = 0;
    if (d1 && d2) {
      diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000 *24 * 0.1); // ms per day
    }

    $('#calculated').val(diff);
    $('#testid').append(diff);
  }

  $("#date1").datepicker({ 
    onSelect: select
  });
  $('#date2').datepicker({
    onSelect: select
  });
});
</script>

Open in new window

Julian HansenCommented:
Correction - you need to change the .append() on the #testid to .html or else you will keep adding to the number instead of replacing it
<script type="text/javascript">
$(document).ready(function () {
    
  var select=function(dateStr) {

    var d1 = $('#date1').datepicker('getDate');
    var d2 = $('#date2').datepicker('getDate');
    var diff = 0;
    if (d1 && d2) {
      diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000 *24 * 0.1); // ms per day
    }

    $('#calculated').val(diff);
    $('#testid').html(diff);
  }

  $("#date1").datepicker({ 
    onSelect: select
  });
  $('#date2').datepicker({
    onSelect: select
  });
});
</script

Open in new window

Also not sure your calculation is correct but you can work on that.
InsoftserviceCommented:
Try to use moment.js

slight changes in above code

 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>

var currentTime    = moment(d1);
      var endTimeJS      = moment(d2);
      var timeRemainJSQ  = endTimeJS.diff(currentTime,'hours')//To get the difference in hours
      alert(timeRemainJSQ)
      diff    =  timeRemainJSQ*0.1; //multiply with 0.01 per hour

<script type="text/javascript">
$(document).ready(function () {
    
  var select=function(dateStr) {

    var d1 = $('#date1').datepicker('getDate');
    var d2 = $('#date2').datepicker('getDate');
    var diff = 0;
   

	var currentTime    = moment(d1);
	var endTimeJS      = moment(d2);
	var timeRemainJSQ  = endTimeJS.diff(currentTime,'hours')//To get the difference in hours
	alert(timeRemainJSQ)
	diff    =  timeRemainJSQ*0.1; //multiply with 0.01 per hour

    $('#calculated').val(diff);
    $('#testid').html(diff);
  }

  $("#date1").datepicker({ 
    onSelect: select
  });
  $('#date2').datepicker({
    onSelect: select
  });
});
</script>

                                          

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.