рассчитать и отобразить разницу между 2 датами перед отправкой формы

Question

Я хотел бы найти способ рассчитать разницу между двумя датами и отобразить результат, прежде чем я отправлю форму. Это будет похоже на регистрацию в выпадающих списках в желтом/оранжевом поле в http://www.booking.com/, где при выборе даты сразу же отображается количество ночей.

HTML версия коды, как показан в JS Fiddle: http://jsfiddle.net/chri_chri/xy2gpa02/2/

Код, используемой для создания выпадающего выбора даты

<?php 
    // displays days with leading 0s 
    $options = array(); 

    for ($i=1; $i<32; $i++) { 
    $theday = date('d', mktime(0,0,0,0,$i,2000)); 
    $sel = ($i == date('d') ? 'selected="selected"' : ''); 
    $options[] = "<option value= \"{$theday}\" {$sel}>{$theday} 
    </option>"; 
    } 

    $options_list = join("\r\n", $options); 
    echo "<div class='select' id='date'><select class=\"short-input\" name=\"day_from\">{$options_list}</select></div>";  
    ?> 

    <?php 
    $options = array(); 

    for ($i = 1; $i<13; $i++) { 
    $themonth = date('F', mktime(0,0,0,$i,2, 2000)); 
    $month = date('m', mktime(0,0,0,$i,2,2000)); 
    $sel =($i == date('n') ? ' selected="selected"' : ''); 
    $options[] = "<option value=\"{$month}\" {$sel}>{$themonth} 
    </option>"; 
    } 
    $options_list = join("\r\n", $options); 
    echo "<div class='select' id='month'><select class=\"short-input\" name=\"month_from\" size=\"1\">{$options_list}</select></div>"; 
    ?> 

    <?php 
    /* build selection list for the year */ 
    $today = time(); // stores today's date 
    $startYr = date("Y", $today); // get the year from $today 
echo "<div class='select' id='year'> 
          <select class='short-input' name='year_from'>\n"; 
for ($year=$startYr;$year<=$startYr+10;$year++) 
{ 
    echo " <option value= $year"; 
    if ($startYr == $year) 
    { 
    echo ""; 
} 
echo " > $year</option>\n"; 
} 
echo "</select>\n</div>\n"; 
?> 

Answer 1

у вас есть два варианта, использовать Java-скрипт, или отправить форму в PHP файл и обрабатывать форму. jsfiddle рабочий пример http://jsfiddle.net/mdamia/3b5fyzjL/32/

// скрипт

function stayCost() { 
    var dayFrom = $('.day-from').val(); 
    var monthFrom = $('.month-from').val(); 
    var yearFrom = $('.year-from').val(); 
    var dateFrom = Date.parse(monthFrom + ' ' + dayFrom + ' ' + yearFrom); 
    var dayTo = $('.day-to').val(); 
    var monthTo = $('.month-to').val(); 
    var yearTo = $('.year-to').val(); 
    var dateTo = Date.parse(monthTo + ' ' + dayTo + ' ' + yearTo); 
    var dateDifference = dateTo - dateFrom; 
    var diffInDays = Math.ceil(dateDifference/(1000 * 3600 * 24)); 
    $('.days').text(diffInDays); 
    $('.cost').text(diffInDays * 40); 
} 
stayCost(); 
$('.day-to').change(function() { 
    stayCost(); 
});