使用日歷選擇器更新另一個輸入值的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>

注意：從日歷開始，代碼中的很多事情都可以改進。