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

Posted 2023-05-07

【中文标题】在 Modelpopup 文本框中更改 Datepicker 的位置

【英文标题】：Change position of Datepicker inside Modelpopup textbox

【发布时间】：2015-09-18 20:17:13

【问题描述】：

我正在开发一个 ASP.Net 网络表单，其中包括 AJAX Modelpoup Extender 和 jquery nepali-datepicker。我必须将nepali-datepicker 集成到我的第二个modelpopup 内的文本框中，即蓝色背景如下图所示。 我面临的问题是我无法将datepicker 定位在textbox 的底部

根据帖子上的答案(How to change the pop-up position of the jQuery DatePicker control)，我能够将日期选择器放在第二个模型弹出窗口的前面。有没有一种方法可以用来将日期选择器实际定位到文本框。

这是我的脚本和样式：

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

看起来像

有没有一种方法可以用来将日期选择器实际定位到文本框的底部。

【参考方案1】：

当您使用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

【讨论】：

我使用的日期选择器与jquery UI Datepicker 略有不同。我搜索了beforeShow 属性，但找不到。不管怎样，我去 datepicker 的开发者网站联系他，发现他发布了一个新版本的 datepicker。我实施了较新的版本，我不知道为什么解决了问题本身。无论如何谢谢:)

由于jquery datepicker插件的不同，这个解决方案不适合我..希望这个解决方案适用于其他用户。所以我会把我的赏金奖励给你:)

【参考方案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>

这很重要

【讨论】：

我试过了......它不起作用......datepicker对话框从第二个`modelpopup的顶部开始，并在主窗体的底部结束。我已更新问题以显示设计。

@TFrost 已更新。另外，你有你的网站吗？所以，我们可以看看实际情况

@Backs ：不，我还没有在网络上部署它。如果您需要更多信息，我可以更新问题..