使用日历选择器更新另一个输入值的onchange / oninput

Question

如果另一个字段的值发生变化，我需要更新一个字段的值。 我要更新的字段包含时间戳，其值可能更改的字段包含日期（yyyy-MM-dd）。 通过日历选择器进行更改，这可能是onchange和oninput事件无法调用该函数的原因。

这是我的代码：

<input required class="short" type="text" id="startdate" name="startdate" value="<?php echo (isset($startdate) ? $startdate : "") ?>" oninput="updateTimestamp();" />
    <input required class="short" type="text" id="startdate_u" name="startdate_u" value="<?php echo (isset($startdate_u) ? $startdate_u : "") ?>" />
    <a href="#" onclick="cal.select(document.forms['project'].startdate,'anchor','yyyy-MM-dd'); return false;" name="anchor" id="anchor"><img src="images/calendar_icon.png" /></a>
    <script>
        var cal = new CalendarPopup();
        function popup(mylink, windowname) {
            if (! window.focus)return true;
                var href;
            if (typeof(mylink) == 'string')
                href=mylink;
            else
                href=mylink.href;
            window.open(href, windowname, 'width=500,height=300,scrollbars=yes,resizable=yes');
            return false;
        }
        function updateTimestamp() {
            var startDate = document.getElementById("startdate");
            var newTimestamp = Math.round(new Date(startDate.value).getTime()/1000);
            document.getElementById("startdate_u").value = newTimestamp.toString();
        }
    </script>

这是日历代码的链接： http : //www.mattkruse.com/javascript/calendarpopup/source.html

我没有使用JQuery。 高度赞赏您的建议：)整个网站均按照HTML5标准编写–我读到oninput应该可以解决问题，但事实并非如此。 已在Chrome和IE 11上测试。

Answer 1

该日历还定义了一个setReturnFunction，它期望函数的名称能够得到结果。

因此，我认为您需要将其设置为将接收结果的函数的名称，填写您的输入并触发您可能喜欢的任何其他功能。

就像是：

<script>
   function dateSelected(y,m,d){
   // Fill in your input as probably it will not be filled.
   // Trigger any additional functionality
    updateTimestamp();
    var dateField = document.getElementById("startdate");
    dateField.value = y + "-" + m + "-" + d;
   }

   var cal = new CalendarPopup();
   cal.setReturnFunction('dateSelected');
   function popup(mylink, windowname) {
    if (! window.focus)return true;
     var href;
    if (typeof(mylink) == 'string')
     href=mylink;
    else
     href=mylink.href;
    window.open(href, windowname, 'width=500,height=300,scrollbars=yes,resizable=yes');
    return false;
   }

   function updateTimestamp() {
    var startDate = document.getElementById("startdate");
    var newTimestamp = Math.round(new Date(startDate.value).getTime()/1000);
    document.getElementById("startdate_u").value = newTimestamp.toString();
   }
  </script>

注意：从日历开始，代码中的很多事情都可以改进。