日期选取器位置未固定，弹出窗口中的文本字段

Datepicker Position not fixed with textfield in popup

本文关键字：窗口 字段 文本 选取 位置 日期      更新时间：2023-09-26

>我有一个花哨的盒子弹出窗口。其中我有一个很长的内容。该内容包括带有日期选取器的出生日期字段。

现在，当我

单击字段时，会出现日历，但是当我用鼠标滚轮滚动时，它不会保留在文本字段中，日期选择器不会移动，它保留在打开它的同一位置，我希望它随着滚动移动。

Here is the FIDDLE DEMO with this issue :

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

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

我该如何解决这个问题？

> datapicker根据原始位置定位日历input。但是，当您滚动时，它不会重新定位。但是，您可以将datepicker重新定位在花式盒子scroll上。

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 之后和关闭 box 之前触发的回调方法。

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

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

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

  1. 最好删除弹出窗口中的滚动（jsfiddle）。
  2. 制作内联日期选择器 （jsfiddle）

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

如果我在你那里，我会在滚动和调整大小时关闭日期选择器，可能没有人会介意，因为它也会关闭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");          
      }
}

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

请检查

这个小提琴是否有效 - 链接。

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

更改的网页：-

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