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: 
Sorry for the delayed reply... Anyways I will like to improve this answer.
I had the same problem but in my case it occurred due to the icon's position in the date textbox.
If you just want to update the icon’s position, simply call the update method without any arguments:

var datepicker = $('element').data('Zebra\_DatePicker');
datepicker.update();
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>
```