javascript - 如何按 Javascript 中两个输入选择之间的名称计算天数范围？

Question

这里有一些解决方案如何使用 JavaScript 仅按周的日期名称来计算两个选择输入之间的天数？或者 jsfiddle 中的一些演示？

示例:

我有两个选择标签输入:

<select>
  <option value="1">Sunday</option>
  <option value="2">Monday</option>
  <option value="3">Tuesday</option>
  <option value="4">Wednesday</option>
  <option value="5">Thursday</option>
  <option value="6">Friday</option>
  <option value="7">Saturday</option>
</select> 

 <select>
  <option value="1">Sunday</option>
  <option value="2">Monday</option>
  <option value="3">Tuesday</option>
  <option value="4">Wednesday</option>
  <option value="5">Thursday</option>
  <option value="6">Friday</option>
  <option value="7">Saturday</option>
</select> 

<input type="text" name="c_days">

如果用户在第一个选择中选择星期五，在第二个选择中选择星期一(结果为 3 天)，则应计算第一个选择和第二个选择之间的总天数，并将计数值放入 c_days 输入中。

感谢您的想法!

Answer 1

function updateResult() {
  // Get selections.
  var firstValue = parseInt(document.querySelector('#firstMenu').value);
  var secondValue = parseInt(document.querySelector('#secondMenu').value);
  // Calculate difference. If < 0, add 7 days.
  var difference = secondValue - firstValue;
  if (difference < 0) difference += 7;
  // Add value to input
  document.querySelector('#c_days').value = difference;
}

window.onload = function() {
  // Append functions to drop down menus.
  document.querySelector('#firstMenu').addEventListener('change', updateResult);
    document.querySelector('#secondMenu').addEventListener('change', updateResult);
};

<select id="firstMenu">
  <option value="1">Sunday</option>
  <option value="2">Monday</option>
  <option value="3">Tuesday</option>
  <option value="4">Wednesday</option>
  <option value="5">Thursday</option>
  <option value="6">Friday</option>
  <option value="7">Saturday</option>
</select> 

 <select id="secondMenu">
  <option value="1">Sunday</option>
  <option value="2">Monday</option>
  <option value="3">Tuesday</option>
  <option value="4">Wednesday</option>
  <option value="5">Thursday</option>
  <option value="6">Friday</option>
  <option value="7">Saturday</option>
</select> 

<input type="text" name="c_days" id="c_days" value="0">