Change position of Datepicker inside Modelpopup textbox

Question

I am working on a ASP.Net webform which includes AJAX Modelpoup Extender and jquery nepali-datepicker. I have to integrate nepali-datepicker to a textbox that is inside my second modelpopup i.e. with blue background shown in image below. Problem I am facing is that I am not able to position datepicker at bottom of textbox

Based on answers on the post(How to change the pop-up position of the jQuery DatePicker control) I was able to bring datepicker in front of 2nd model popup. Is there a way that I can use to actually position datepicker to the textbox.

Here is my script and styles:

<script type="text/javascript">        
    function pageLoad() {
        $('.nepali-calendar').nepaliDatePicker();
    }

    $(document).ready(function () {
        $('.nepali-calendar').nepaliDatePicker();

    });
</script>    

<style type="text/css">
    div#ndp-nepali-box
    {
        position:absolute;
        z-index: 999999;
    }
</style>

Following image shows how it is is positioned right now. enter image description here

If I use position as relative.

<style type="text/css">
    div#ndp-nepali-box
    {
        position: relative;
        z-index: 999999;
    }
</style>

It looks like

Is there a way that I can use to actually position datepicker to bottom of the textbox.

score 6 · Answer 1 · edited May 23 '17 at 11:44

6

As you are using jquery UI Datepicker it should have beforeShow property and change css inside this property like below.

Check this fiddle

$('input.date').datepicker({
beforeShow: function(input, inst) {
 var cal = inst.dpDiv;
 var top  = $(this).offset().top + $(this).outerHeight();
 var left = $(this).offset().left;
 setTimeout(function() {
    cal.css({
        'top' : top,
        'left': left
    });
 }, 10);
}
});

Reference

edited May 23 '17 at 11:44

Community

1
1

answered Aug 20 '15 at 10:22

Light

1,077
10
33

1

I am using a slight different datepicker from `jquery UI Datepicker`. I searched for `beforeShow` property but couldn't found it. Anyways I went to datepicker's developer's website to contact him and found out he has released a new version of datepicker. I implemented the newer version which I don't know why solved the problem itself. Thanks anyways :) – TFrost Aug 20 '15 at 11:51
Due to differences in `jquery datepicker` plugins, this solution was not for me.. hope this solution works for other users. So I'll reward my bounty to you :) – TFrost Aug 21 '15 at 14:10

Backs · Answer 2 · 2015-08-16T12:36:33.420

0

Try relative position:

<style type="text/css">
    div#ndp-nepali-box
    {
        position: relative;
        z-index: 999999;
    }
</style>

I don't know, what is div#ndp-nepali-box, but try to do this:

<style type="text/css">
    .ui-datepicker
    {
        position: relative;
        z-index: 999999;
    }
</style>

it can be important

edited Aug 16 '15 at 12:36

answered Aug 16 '15 at 09:00

Backs

24,430
5
58
85

I've tried that... it doesn't work.... `datepicker` dialogbox begins from top of the second `modelpopup, and ends at the bottom of the main form. I've updated the question to show the design. – TFrost Aug 16 '15 at 09:55
@TFrost updated. also, do you have your site in web? so, we can look at real situation – Backs Aug 16 '15 at 12:37
@Backs : no I haven't deployed it on web.. If you require more information I can update the question.. – TFrost Aug 18 '15 at 06:39

Change position of Datepicker inside Modelpopup textbox

2 Answers2