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

HTML输入弹出日历问题

回答

相关问题