HTML输入弹出日历问题

HTML input popup calendar issue

本文关键字：日历 问题 输入 HTML      更新时间：2023-09-26

当用户单击输入字段时，我正试图弹出一个日历控件。日历控件实际上是我试图切换显示的日历的div部分。问题是当我点击输入时，日历不会显示。但问题是，当我将输入的位置属性从"相对"更改为"固定"时，日历会显示出来，但相对于浏览器。我希望它相对于输入字段显示。

    <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：

<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为"calendar"的div容器。您可能需要将日历脚本本身放在div中，因为您不需要通过控件将变量传递给它。

相关文章：