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

【问题标题】：Update input value onchange/oninput of another using calendar selector使用日历选择器更新另一个输入值 onchange/oninput
【发布时间】：2016-12-11 18:53:53
【问题描述】：

如果另一个字段的值发生变化，我需要更新一个字段的值。我要更新的字段包含时间戳，其值可能更改的字段包含日期（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 上测试。

【问题讨论】：

您没有得到.value 的startDate 并且在您的Math.round(new Date(startdate) 中，该变量没有大写D。试试Math.round(new Date(startDate.value).getTime()/1000);
你是对的。我刚刚输入了这些，解释了错别字。早些时候我尝试了.value 和没有。甚至不会触发一个简单的alert()。
刚刚也尝试了Math.round(new Date(startDate.value).getTime()/1000); - 没有。我认为问题在于oninput 事件没有触发，因为我使用日历选择器更改了日期，但不知道如何解决这个问题。

标签： javascript onchange

【解决方案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>

注意：代码中有很多地方可以改进，从日历开始。

【讨论】：