javascript - 隐藏div中的日历

Question

我在一个表单中使用了 3 次 JavaScript 日历。第一个实例就像它应该的那样工作。第二个和第三个都在显示 onclick 的隐藏 div 中。这两个日历会在页面的左上角弹出。如何让它按应有的位置放置？

    <div id="form_container">
    <form  method="post" action="index.php">
        <fieldset>
            <legend>Day One</legend>
            <li id="li_7" >
            <label class="description" for="d1_date">Date</label>
                <input type="text" name="d1_date" id="d1_date" value="<?php if(isset($_GET['d1_date'])){ echo $_GET['d1_date']; }else{ echo "";}?>" class="event_search_date_input" /> 
            </li>   
            <a class="add_day_link" onclick="document.getElementById('day_two_div').style.display='';position='relative';return false;" 
            href="" style="text-decoration:none;border-bottom:1px dotted blue;">Plan the next day...</a>
        </fieldset>
    </div>
    <div id="day_two_div" style="display:none;"> 
        <fieldset>
            <legend>Day Two</legend>
            <li id="li_14" >
            <label class="description" for="d2_date">Date</label>
                <input type="text" name="d2_date" id="d2_date" value="<?php if(isset($_GET['d2_date'])){ echo $_GET['d2_date']; }else{ echo "";}?>" class="event_search_date_input" /> 
            </li>   
            <a class="add_day_link" onclick="document.getElementById('day_three_div').style.display='';return false;" 
            href="" style="text-decoration:none;border-bottom:1px dotted blue;">Plan the next day...</a>
        </fieldset>
    </div><!-- close day_two_div -->    
            <li class="buttons">
                <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
            </li>
        </ul>
    </form> 
    </div><!-- close formContainer -->

    <script type="text/javascript" src="../js/datepickr.js"></script>
    <script type="text/javascript">
        new datepickr('d1_date', {
            'dateFormat': 'Y-m-d'
        });
        new datepickr('d2_date', {
            'dateFormat': 'Y-m-d'
        });
        new datepickr('d3_date', {
            'dateFormat': 'Y-m-d'
        });
    </script>

这是我觉得需要更正的代码吗？

    var calendarContainer = buildNode('div', { className: 'calendar' });
    calendarContainer.style.cssText = 'display: none; position: absolute; top: ' + (inputTop + this.element.offsetHeight) + 'px; left: ' + inputLeft + 'px; z-index: 100;';

Answer 1

var dd = document.createElement("div");  
dd.addClass("calendar");  
dd.style.cssText = 'display: none; position: absolute; top: 0; left: 0; z-index: 100;';  
var b = document.getElementsByTagName("body")[0];  
b.appendChild(dd);  

这只是您所描述内容的转录。
想法无论如何都适用。 如果你想要更具体的代码，请更详细地描述你的情况并发布你的完整代码——诸如使用了什么变量之类的东西否则是看不到的