HTML輸入彈出日曆問題

我想在用戶點擊輸入字段時彈出日曆控件。日曆控件實際上是日曆的div部分，我試圖切換顯示。問題是當我點擊輸入時，日曆不顯示。但問題在於，當我將輸入的位置屬性從「相對」更改爲「固定」時，日曆顯示出來，但相對於瀏覽器。我希望它相對於輸入字段來顯示。使用此JavascriptHTML輸入彈出日曆問題

<script> 
    function showCalendar(startDate) 
    { 
     try{ 
      //var inputElement = document.getElementById(startDate); 
      var inputElement = document.getElementsByName(startDate)[0]; 
      var divCalendar = document.getElementById('calendar'); 
      var divContent = document.getElementById('content'); 
      if(divCalendar.style.display == 'block') 
      { 
       divContent.appendChild(divCalendar); 
       //inputElement.style.position='fixed'; 
       //divCalendar.style.position='fixed'; 
       divCalendar.style.display = 'none'; 
       //divCalendar.style.zindex = 0; 
      } 
      else 
      { 
       divCalendar.parentNode.removeChild(divCalendar); 
       inputElement.appendChild(divCalendar); 
       inputElement.style.position='relative'; 
       divCalendar.style.position='absolute'; 
       divCalendar.style.top=30; 
       divCalendar.style.left=30; 
       //divCalendar.style.zindex = 100; 
       divCalendar.style.display = 'block'; 
      } 
     } 
     catch(e) 
     { 
      alert(e); 
     } 

    } 
    </script> 

     <body> 
<div id="content"> 
     <table id="bookingTable"> 
      <tr> 
       <th colspan="4">Book Rentals</th> 
      </tr> 
      <tr> 
       <th colspan="4"><%=fileService.title%></th> 
      </tr> 
      <tr> 
       <td style="text-align:right;">Start Date</td> 
       <td style="text-align:left;"> 
       <input style="cursor:pointer;" type="text" name="startDate" value="" onclick="showCalendar('startDate')"> 
       </td> 
       <td style="text-align:right;">Start Time</td> 
       <td style="text-align:left;"><input type="text" name="startTime" value=""></td> 
      </tr> 
      <tr> 
       <td style="text-align:right;">End Date</td> 
       <td style="text-align:left;"> 
       <input style="cursor:pointer;" type="text" name="endDate" value="" onclick="showCalendar('endDate')"> 
       </td> 
       <td style="text-align:right;">End Time</td> 
       <td style="text-align:left;"><input type="text" name="endTime" value=""></td> 
      </tr> 
      <tr> 
       <td colspan="4" style="text-align: center;"> 
       <input type="submit" class="button" name="submit" value="Add" /> 
       </td> 
      </tr> 
     </table> 

     <div id="calendar" style="display: none;"> 
     Here is create a table dynamically which represent a calendar and which I am trying to toggle the display. 
     </div> 

</div>

來源

2012-03-05 user1241438

你也越來越其他錯誤：'無法讀取類型null' – gideon 2012-03-05 04:09:26

的財產，這是因爲這條線在JavaScript中的 \t \t \t VAR divContent =的document.getElementById（「內容」）; 我還沒有在這裏粘貼完整的JSP頁面內容。但基本上'內容'是圍繞

– user12414382012-03-05 04:14:27

的另一個div元素。作爲一般指南，在StackOverflow中，不要在代碼中使用選項卡，或者在製表符設置爲4時將其展開。一般閱讀代碼。 – 2012-03-05 04:51:25

回答

嘗試：

<script type="text/javascript"> 
<!-- 
function toggle_visibility(id) { 
var e = document.getElementById(id); 
if(e.style.display == 'none') 
e.style.display = 'block'; 
else 
e.style.display = 'none'; 
} 
//--> 
</script>

並在您的按鈕是切換日曆此HTML：

onClick="toggle_visibility('calendar');"

這只是顯示/隱藏了ID的DIV容器'日曆'。您可能必須將日曆腳本本身放入div中，因爲您不需要通過控件將變量傳遞給它。

來源

2012-03-05 23:13:20

不，這不起作用。但是當我用鏈接包裝輸入元素，然後點擊輸入它的作品。在這裏，我製作了 div日曆的父級，並將的位置更改爲相對和div的絕對位置。 – user1241438 2012-03-09 21:08:44

相關問題