显示 JavaScript 函数/值

Question

我是 JavaScript 的初学者，这个问题可能表明了这一点。

我有这个代码：

<script>
    function treatAsUTC(s) {
        var b = s.split(/\D/);
        return new Date(Date.UTC(b[2], b[1]-1, b[0]));
    }

    function daysBetween(startDate, endDate) {
        startDate = treatAsUTC(startDate);
        endDate = treatAsUTC(endDate);
        return (endDate - startDate) / 8.64e7;
    }

    function calcDiff() {
        document.querySelector('#tdays').value = 
           (daysBetween(document.querySelector('#startPicker').value,
            document.querySelector('#endPicker').value));
    }
</script>

<input type="text" id="sod" class="startd" value="10/02/2016" />d/m/y
<input type="text" id="dos" class="endd"  value="12/02/2016" />d/m/y
<br>
<button onclick="calcDiff()">Calculate difference in days</button>
<input type="text" id="tdays" readonly>Days

现在我希望结果在日期变化时永久显示和更新（它们将是日期选择器）而不是 onClick。

我已经尝试过 innerHTML 和 document.write 但我无法让它工作。

任何帮助将不胜感激。

提前谢谢。

伊恩

Answer 1

基本上你在大多数地方都使用了错误的选择器。

#sod 表示 ID 为 sod 的元素。这同样适用于其他人。

添加此document.querySelector('#sod').addEventListener('input', calcDiff); 以在您更改输入值时调用函数。

function treatAsUTC(s) {
  var b = s.split(/\D/);
  return new Date(Date.UTC(b[2], b[1] - 1, b[0]));
}

function daysBetween(startDate, endDate) {
  startDate = treatAsUTC(startDate);
  endDate = treatAsUTC(endDate);
  return (endDate - startDate) / 8.64e7;
}

function calcDiff() {
  document.querySelector('#result').value =
    (daysBetween(document.querySelector('#sod').value,
      document.querySelector('#dos').value));
}
document.querySelector('#sod').addEventListener('input', calcDiff);
document.querySelector('#dos').addEventListener('input', calcDiff);

<input type="text" id="sod" class="startd" value="10/02/2016" />d/m/y
<input type="text" id="dos" class="endd" value="12/02/2016" />d/m/y
<br>
<button onclick="calcDiff()">Calculate difference in days</button>
<input type="text" id="result" readonly>Days

Answer 2

如果没有任何框架的帮助，JavaScript 需要一些东西来告诉它何时更新，因此让日期输入（sod 和 dos）在更改时触发 calcDiff() 函数可能是您最好的选择。

<input onchange="calcDiff()"type="text" id="sod" class="startd" value="10/02/2016" /> 

这将在值发生变化并且输入失去焦点时触发。

Jcubic 对 onkeyup 的建议会给用户更直接的反馈，但您可能希望在它触发但尚未输入有效日期时添加一些错误处理。

Answer 3

有了这里的内容，#tdays、#startPicker 和#endPicker 应该是包含值或可以设置值的元素。它们在您的 HTML 中不存在，这就是它失败的原因。

我将它们替换为#result、#sod 和#dos，然后就成功了。

另外，请考虑在浏览器中使用开发者工具。一旦我创建了一个 jsFiddle 并点击运行，我就能够在控制台中看到 javascript 错误，而且很多时候它确实有助于处理这样的事情。

Answer 4

    $(document).ready(function() {
        $( "#startdate,#enddate" ).datepicker({
            changeMonth: true,
            changeYear: true,
            firstDay: 1,
            dateFormat: 'dd/mm/yy',
        })

        $( "#startdate" ).datepicker();
        $( "#enddate" ).datepicker();

        $('#startdate').change(function() {
            var start = $('#startdate').datepicker('getDate');
            var end   = $('#enddate').datepicker('getDate');

            if (end==null) {
              //do nothing
            } else if (end!=null && start<end) {
                var days   = (end - start)/1000/60/60/24;
                $('#days').val(days);
            } else {
                alert ("Wrong Choice");
                $('#startdate').val("");
                $('#enddate').val("");
                $('#days').val("");
            }
        }); //end change function
        $('#enddate').change(function() {
            var start = $('#startdate').datepicker('getDate');
            var end   = $('#enddate').datepicker('getDate');

            if (start==null) {
              //do nothing
            } else if (start!=null && start<end) {
                var days   = (end - start)/1000/60/60/24;
                $('#days').val(days);
            } else {
                alert ("Wrong Choice");
                $('#startdate').val("");
                $('#enddate').val("");
                $('#days').val("");
            }
        }); //end change function
    }); //end ready

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<input type="text"  placeholder="date1" id="startdate">
<input type="text" placeholder="date2" id="enddate">
<input type="text" id="days">