javascript - 当输入隐藏时正确渲染 glDatePicker

Question

我正在使用 glDatePicker 在我的网络应用程序中运行日历。据我了解(我不太擅长 JS/jQuery)，日历的大小和位置取决于分配给它的输入。问题是，页面加载时输入是隐藏的；当用户选择某些选项时，就会显示输入。正如您可能已经猜到的，当显示输入并且用户单击它时，日历显示如下:/image/Jk5HC.jpg

任何人都可以提供有关我如何实现这项工作的任何见解吗？

glDatePicker:http://glad.github.io/glDatePicker/

谢谢。

Answer 1

您可以通过日期选择器的 init 传递一些选项，其中之一称为“showAlways”。如果将此设置为 false，则您可以创建一个变量并在输入字段获得焦点时调用“show”方法。

$('#your-element').glDatePicker({
     showAlways: false,
     ....
     ....
});

$('#your-input-element').on('focus', function() {
     var $calendar = $('#your-element').glDatePicker(true);
     $calendar.show();
     $calender.render();
});

您还应该将输入元素和日历元素包装在带有position:relative的容器元素(div、部分等)中，以便日历将保持在输入元素附近

#container {
    position: relative;
}


<div id="container">
    <input type="text" id="mydate" gldp-id="mydate" />
    <div gldp-el="mydate"
         style="width:400px; height:300px; position:absolute; top:70px; left:100px;">
    </div>
</div>

您可能需要也可能不需要调用“render”方法。

取自 http://glad.github.io/glDatePicker/#examples