Question: I am developing an app in asp.net in which I am using the Jquery Zebra DatePicker but the issue is this, I am opening the form in Jquery dailog and calendar will open on the dialog but datepicker is opening at the bottom of the page, same problem is reported [here](https://stackoverflow.com/questions/11407719/jquery-ui-datepicker-position-bottom-or-top-but-not-both) but I am unable to understand how to modify the function. Kindly tell me solution or purpose me some other plugin which is same as ajax calender extender. Thanks in advance.

Answer: 
I recently have the same problem. But a little delay (timeout) solves the issue for me:

```
jQuery(document).ready(function($){
    window.setTimeout(function(){
        $('input.datepicker').Zebra_DatePicker();
    }, 100);
});

```
We can control the Zipra Datepicker positions by changing the **default\_position** and **container** attributes

Zipra Datepicker has **default\_position** attribute, We can use this `default_position` attribute to display the calendar above or below of the input box.

* Default position -> **above / below**

Zipra Datepicker default position is above, it means calendar will display right top of the input box.

---

The second option is the container, the calendar will display relative to the container element.

* `container: $('body')`,

By default, the container will be the `body` which means the date picker will append related to the body, You can see the date picker `HTML code` at the top of the `DOM` 

You can change the container position relative to the parent of your input box by adding the class name of parent `div` in the container section.

```js
$('#datepicker-on-change').Zebra_DatePicker({
        default_position: 'below',
        container : $('.datepicker-position')      
});
```

```html
<div class="datepicker-position">
<input  id="datepicker-on-change" type="text" class="form-control" data-zdp_readonly_element="false">                                
</div>
```