在Modelpopup文本框中更改Datepicker的位置

Question

我正在开发一个包含AJAX Modelpoup Extender和的ASP.Net webform jquery nepali-datepicker.我必须集成nepali-datepicker到我的第二个文本框中,modelpopup即下面的图像中显示蓝色背景.我面临的问题是我无法datepicker在底部定位textbox

基于帖子上的答案(如何更改jQuery DatePicker控件的弹出位置)我能够在第二个模型弹出窗口前面引入datepicker.有没有办法可以用来将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

在使用jquery UI Datepicker它时,它应具有beforeShow属性并在此属性中更改css,如下所示.

检查这个小提琴

$('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);
}
});

参考

Answer 2

尝试相对位置：

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

我不知道 div#ndp-nepali-box 是什么，但尝试这样做：

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

这可能很重要