Rendering glDatePicker correctly when the input was hidden

Question

I am using glDatePicker to run a calendar in my web app. From what I understand (I'm not really good with JS/jQuery) the size and position of the calendar depends on the input it is assigned to. Problem is, the input is hidden when the page loads; when the user selects some options the input is then shown. As you might have guessed, when the input is shown and the user clicks in it, the calendar shows like this: http://i.imgur.com/spnPa7Y.jpg

Can anyone offer any insight as to how I could make this work?

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

Thanks.

Answer 1

There's some options that you can pass through the date picker's init, and one of them is called "showAlways". If this is set to false, then you can create a variable and call the "show" method when the input field is in focus.

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

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

You should also wrap your input element and calendar element in a container element (div, section, etc.) w/ position: relative so the calendar will stay near the input element

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

You may or may not have to call the "render" method.

Taken from http://glad.github.io/glDatePicker/#examples