日期选择器在弹出窗口中与文本字段位置不固定

Question

我有一个Fancy Box弹窗。其中包含一段较长的内容，其中包括一个带有日期选择器的出生日期字段。

现在，当我单击该字段时，日历出现，但当我使用鼠标滚轮滚动页面时，日历不会保留在文本字段中，它仍停留在打开的位置，我希望它能随着滚动而移动。

Here is the FIDDLE DEMO with this issue :

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

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

我该如何解决这个问题？

- Hassan Sardar

---

实际上，日期选择器的位置是固定的，它在同一个地方，只有内部的fancybox项目在移动。 - Sridhar R

尝试在CSS文件中更改.ui-datepicker。应该可以解决问题。 - user2704193

这里有一些符合您需求的东西。http://jsfiddle.net/PFVxK/1319/ 但请注意，我们正在调整默认功能，因此需要进一步自定义。 - user2704193

这个代码片段有问题，定位问题已经解决了，但是日期没有被选中，并且在页面其他地方点击后也没有隐藏。 - Hassan Sardar

@CodeHunter 你试过我的答案了吗？https://dev59.com/fXjZa4cB1Zd3GeqPhbps#19820936 - Selvakumar Arumugam

Answer 1

datapicker 根据 input 的原始位置定位日历。但是，当你滚动时它不会重新定位。不过，你可以在 fancybox 的滚动中重新定位 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 加载后和关闭前触发的回调方法。

请查看演示http://jsfiddle.net/NsNHZ/1/，并让我知道它是否适用于您。

- Selvakumar Arumugam

Answer 2

实际问题是日期选择器的默认位置是固定的，因此当您滚动时会有移动。

将日期选择器与文本框一起固定在一个位置不是最好的选择，我建议您有两个选项：

1. 更好的办法是删除弹出窗口中的滚动条（jsfiddle）。 2. 制作内嵌式日期选择器（jsfiddle）。

- Praveen

---

你的答案示例中问题未得到解决。 - Hassan Sardar

@CodeHunter，请检查我的1个fiddle。 - Praveen

删除滚动条不是一个选择，因为我必须保留它在我的原始内容中。 - Hassan Sardar

Answer 3

如果是我，我会在滚动和调整大小时关闭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");          
      }
}

- Nick N.

Answer 4

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

- jitender

---

我猜CSS在这里不是一个解决方案。 - Hassan Sardar

Answer 5

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

- Mung Pham

---

虽然该链接可能回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。如果链接页面更改，仅链接的答案可能会变得无效。-来自审阅 - Bae

Answer 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

- Sujata Chanda