我正在使用 glDatePicker 在我的网络应用程序中运行日历。据我了解(我不太擅长 JS/jQuery),日历的大小和位置取决于分配给它的输入。问题是,页面加载时输入是隐藏的;当用户选择某些选项时,就会显示输入。正如您可能已经猜到的,当显示输入并且用户单击它时,日历显示如下:/image/Jk5HC.jpg
任何人都可以提供有关我如何实现这项工作的任何见解吗?
glDatePicker:http://glad.github.io/glDatePicker/
谢谢。
最佳答案
您可以通过日期选择器的 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”方法。
关于javascript - 当输入隐藏时正确渲染 glDatePicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25344226/