Изменить положение Datepicker внутри текстового поля Modelpopup

Question

Я работаю над веб-формой ASP.Net, которая включает в себя AJAX Modelpoup Extender и jquery nepali-datepicker. Я должен интегрировать nepali-datepicker в текстовое поле, которое находится внутри моего второго modelpopup i.e. с синим фоном, изображенным на картинке ниже. Проблема я столкнулся в том, что я не в состоянии позиционировать datepicker в нижней части textbox

Основываясь на ответах на пост (How to change the pop-up position of the jQuery DatePicker control) я был в состоянии принести DatePicker перед 2-ой модели всплывающего окна. Есть ли способ, который я могу использовать для фактического размещения datepicker в текстовое поле.

Вот мой сценарий и стили:

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

Следующее изображение показывает, как он позиционируется прямо сейчас.

Если я использую position как relative.

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

Похоже

Есть ли способ, что я могу использовать, чтобы на самом деле положение DatePicker в нижней части текстового поля.

Answer 1

Попробуйте относительное положение:

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

Я не знаю, что ДИВ # NDP-непальский-бокс, но попытаться сделать это:

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

может быть важным

Answer 2

Как вы используете jquery UI Datepicker, он должен иметь beforeShow и изменить css внутри этого свойства, как показано ниже.

Проверить это 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