在提交表格之前计算并显示2个日期之间的差异

时间:2015-08-19 14:20:36

标签: javascript php html

我想找到一种方法来计算2个日期之间的差异,并在提交表单之前显示结果。这与签入类似 - 检查http://www.booking.com/中黄色/橙色框中的下拉菜单,其中选择日期立即显示的夜晚。

JS Fiddle中显示的HTML代码版本: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";
 ?>

1 个答案:

答案 0 :(得分:0)

你有两个选择,使用java-script或将表单提交到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();
});