javascript - Zebra DatePicker 定位问题

Question

我正在使用 Jquery Zebra DatePicker 的 asp.net 中开发一个应用程序，但问题是，我在 Jquery dailog 中打开表单，日历将在对话框中打开，但 datepicker 在页面底部打开，此处报告了相同的问题，但我无法理解如何修改该功能。请告诉我解决方案或使用其他与 ajax 日历扩展器相同的插件。提前致谢。

Answer 1

我最近有同样的问题。但是一点延迟（超时）为我解决了这个问题：

jQuery(document).ready(function($){
    window.setTimeout(function(){
        $('input.datepicker').Zebra_DatePicker();
    }, 100);
});

Answer 2

抱歉延迟回复...无论如何我想改进这个答案。我遇到了同样的问题，但在我的情况下，它是由于图标在日期文本框中的位置而发生的。如果您只想更新图标的位置，只需调用不带任何参数的 update 方法：

var datepicker = $('element').data('Zebra_DatePicker'); datepicker.update();

Answer 3

在您的 css 类中添加以下内容，因为它是 (Zebra_DatePicker)：

    .Zebra_DatePicker{
    position: absolute;
    } 

Answer 4

我们可以通过改变default_position和container属性来控制 Zipra Datepicker 的位置

Zipra Datepicker 有default_position属性，我们可以使用该default_position属性在输入框的上方或下方显示日历。

• 默认位置 ->上方/下方

Zipra Datepicker 默认位置在上方，表示日历会显示在输入框的右上方。

---

第二个选项是容器，日历会相对于容器元素显示。

• container: $('body'),

默认情况下，容器将是 ，body这意味着日期选择器将附加到主体，您可以HTML code在顶部看到日期选择器DOM

您可以通过在容器部分添加父类名称来更改容器相对于输入框父级的位置div。

$('#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>