JSFiddle - React, Tailwind, and code Playground

by Tim BĂĽthe

HTML

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

JavaScript

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