Name your start date picker "date1" and your end date picker "date2". Name the number of days input "numberofdays".
Paste this code into the head of you formname.html directly below the

<!-- End of the headers for CoffeeCup Web Form Builder -->

Next scroll down to your start date picker in the formname.html and add the class "start_date" next to the datepicker class. Also change the ID of the start date to item1_date as I have below.

<input name="date1" class="datepicker start_date" id="item1_date" required type="text"
data-hint="" />

Next repeat what you did for the start date to the end date picker. It should end up looking like this.

<input name="date2" class="datepicker end_date" id="item2_date" required type="text"
data-hint="" />

<script src="common/libs_js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common/libs_js/jquery.ui.datepicker.js" type="text/javascript"></script>

<script type='text/javascript'>
$(window).load(function(){
$(".datepicker").attr ("readOnly" , "true" );
$(".datepicker").datepicker();

var dates = jQuery('.start_date, .end_date').datepicker("option", "onSelect",
function(selectedDate){
var $this = $(this),
option = $this.hasClass("start_date") ? "minDate" : "maxDate",
adjust = $this.hasClass("start_date") ? 1 : -1,
base_date = new Date(selectedDate),
new_date = new Date();
new_date.setDate(base_date.getDate() + (1 * adjust));
dates.not(this).datepicker("option", option, new_date);
var d1=new Date($("input[name='date1']").val());
var d2=new Date($("input[name='date2']").val());

$("input[name='numberofdays']").val((Math.abs((d2-d1)/86400000).toFixed(0)));
$("input[name='numberofdays']").attr('readonly', true);
});
});
</script>