I am developing an app in asp 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 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.

I am developing an app in asp 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 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.

• javascript
• jquery
• asp
• jquery-ui-datepicker

Share Improve this question Follow edited May 23, 2017 at 11:59 CommunityBot 111 silver badge asked Aug 17, 2012 at 10:42 BillzBillz 1,09766 gold badges2525 silver badges6060 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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);
});

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();

Add the following in your css class for it is (Zebra_DatePicker):

    .Zebra_DatePicker{
    position: absolute;
    } 

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.

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

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