javascript - 使用日历选择器更新另一个的 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>

注意:代码中的很多内容都可以改进，从日历开始。