Question

我正在使用glDatePicker在我的网络应用中运行日历。根据我的理解（我对JS / jQuery并不是很好），日历的大小和位置取决于它所分配的输入。问题是，页面加载时隐藏输入;当用户选择某些选项时，则显示输入。您可能已经猜到，当显示输入并且用户点击它时，日历显示如下：http://i.imgur.com/spnPa7Y.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();
});

你还应该将输入元素和日历元素包装在容器元素（div，section等）中w / position：relative，这样日历将保持在输入元素附近

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

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

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

隐藏输入时正确渲染glDatePicker

1 个答案: