3

我有一个花式框弹出窗口。其中我有很长的内容。该内容包括带有 Datepicker 的出生日期字段。

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

Here is the FIDDLE DEMO with this issue :

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

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

我怎样才能解决这个问题 ？

4

6 回答 6

5

基于原始位置datapicker的日历位置。input但是，滚动时它不会重新定位。但是，您可以重新定位datepickerfancybox 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是在加载精美盒子之后关闭盒子之前由精美盒子触发的回调方法。

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

于 2013-11-06T19:22:47.673 回答
2

实际问题是default positiondatepicker 是fixed，因此滚动时会有移动。

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

  1. 最好删除弹出窗口中的滚动条（jsfiddle）。
  2. 制作一个内联日期选择器（jsfiddle）
于 2013-11-04T10:15:34.220 回答
0

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

于 2013-11-04T10:07:48.993 回答
0

如果我在哪里，我会在滚动和调整大小时关闭 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");          
      }
}
于 2013-11-07T08:59:15.687 回答
0

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

于 2021-10-13T01:49:18.170 回答
-1

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

 $('#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
于 2013-11-07T10:38:33.500 回答