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，但是我无法让它工作。

非常感谢任何帮助。

Thansk in advnace。

伊恩

Answer 1

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

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

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

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 2

如果没有任何框架的帮助，JavaScript需要告诉它什么时候更新，因此在更改时触发calcDiff（）函数的日期输入（sod＆amp; dos）可能是你最好的选择。

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

当值发生变化并且输入上的焦点丢失时，将触发。

Jcubic对onkeyup的建议会给用户提供更直接的反馈，但是你可能想要在它触发时添加一些错误处理，但是没有输入有效的日期。

Answer 3

根据你所拥有的，＃etc，＃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">

显示JavaScript函数/值

4 个答案: