弹出窗口中的文本字段未固定日期选择器位置答案

【问题标题】：Datepicker Position not fixed with textfield in popup弹出窗口中的文本字段未固定日期选择器位置
【发布时间】：2013-11-04 09:58:45
【问题描述】：

我有一个 Fancy Box Popup。其中我有很长的内容。该内容包括带有 Datepicker 的出生日期字段。

现在，当我单击字段 Calender 时出现，但当我用鼠标滚轮滚动时它不会保留在文本字段中，日期选择器不会移动，它仍然在打开它的同一个地方，我希望它随着滚动移动.

Here is the FIDDLE DEMO with this issue :

http://jsfiddle.net/PFVxK/1314/

只需点击弹出窗口，然后点击文本字段，然后滚动它，

我该如何解决这个问题？

【问题讨论】：

实际上 datepicker 的位置是固定的，它在同一个地方里面的 fancybox 项目只是移动
尝试更改 css 文件中的 .ui-datepicker。应该做的伎俩。
这里有一些东西可以满足您的一些需求。 http://jsfiddle.net/PFVxK/1319/ 但是请注意，我们正在修改默认功能，因此需要进一步自定义。
这个小提琴工作不正常，定位问题已解决，但日期没有被选中，点击页面上的其他地方后也没有隐藏
@CodeHunter 你试过我的答案了吗？ stackoverflow.com/a/19820936/297641

标签： javascript jquery html css datepicker

【解决方案1】：

datapicker 根据 input 原始位置定位日历。但是，滚动时它不会重新定位。但是，您可以在 fancybox scroll 上重新定位 datepicker。

afterLoad: function () {
    $('.fancybox-inner').on('scroll', function () {
        var inp = $(this).find('input.hasDatepicker');
        $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
}, beforeClose: function () {
    $('.fancybox-inner').off('scroll');
}

afterLoad和beforeClose是fancy box在加载fancy box后关闭之前触发的回调方法。

查看演示 http://jsfiddle.net/NsNHZ/1/ 并告诉我它是否适合您。

【讨论】：

【解决方案2】：

实际问题是日期选择器的default position是fixed，因此滚动时会有移动。

将日期选择器与文本框一起修复并不好。我会建议 2 个选项

最好移除弹出窗口中的滚动条 (jsfiddle)。
制作内联日期选择器 (jsfiddle)

【讨论】：

问题未在您的答案中得到解决
@CodeHunter 检查我的 1 个小提琴
删除滚动不是一个选项，因为我必须将它保留在我的原始内容中

【解决方案3】：

请使用position: fixed;和margin-top:40px;

【讨论】：

我猜 CSS 不是这里的解决方案

【解决方案4】：

如果我在你那里，我会在滚动和调整大小时关闭 DatePicker，可能没人会介意，因为它也会关闭 onblur()

看看这个小提琴：http://jsfiddle.net/PFVxK/1325/

$(".fancybox-effects-b").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    helpers: {
        title: {
            type: 'over'
        }
    },
    afterLoad: function () {
        $('.fancybox-inner').on('scroll', function () {
            CloseDatePicker();      
        });
    }, beforeClose: function () {
        $('.fancybox-inner').off('scroll');
    }
});

$(function() {
    $( "#dateofbirth" ).datepicker();

    /*Load only inside fancybox*/
    $(window).resize(function(){
        CloseDatePicker();
    });
});

function CloseDatePicker()
{
      if($("#dateofbirth").datepicker( "widget" ).is(":visible"))
      {
          $("#dateofbirth").datepicker("widget").hide();
          $("#dateofbirth").trigger( "blur");          
      }
}

【讨论】：

【解决方案5】：

你可以设置方向js bootstrap https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#orientation

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案6】：

请检查这个小提琴是否有效 - link.

 $('#dateofbirth').focus(function(){
     $( ".a" ).show();
     $( ".a" ).datepicker();
     });
     $('#dateofbirth').blur(function(){
     $( ".a" ).hide();
     });

更改的html：-

 <input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth">
 <div class='a'></div> // new div added

【讨论】：