HTML输入弹出式日历问题 [英] HTML input popup calendar issue
问题描述
我试图在用户点击输入字段时弹出日历控件。日历控件实际上是日历的div部分，我试图切换显示。问题是当我点击输入时，日历不显示。但问题在于，当我将输入的位置属性从相对更改为固定时，日历显示出来，但相对于浏览器。我希望它相对于输入字段显示。
I am trying to pop a calendar control when a user clicks on an input field. The calendar control is actually a div section for calendar which I am trying to toggle the display. The issue is when I click on the input, the calendar does not show up. But the catch is, when I change the position property of input from "relative" to "fixed", then the calendar shows up but relative to the browser. I want it to be displayed relative to the input field.
<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>
推荐答案
尝试使用此Javascript：
Try using this Javascript:
<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正在切换日历：
And this HTML on your button that is toggling the calendar:
onClick="toggle_visibility('calendar');"
这只是显示/隐藏ID为'calendar'的div容器。您可能必须将日历脚本本身放在您的div中，因为您无需通过控件将变量传递给它。
This simply displays/hides the div container with the ID of 'calendar'. You might have to put the calendar script itself inside your div, given that you don't need to pass variables to it via a control.
这篇关于HTML输入弹出式日历问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
