FireFox

Question

当IE和Chrome工作正常时，不知何故jQuery datepicker显示在窗口顶部而不是FireFox上的输入字段下。没有额外的CSS或jQuery - 只是带有jQuery + jQuery UI的vanilla KnockoutJS和默认主题。

datepicker的代码类似于

$( function() {
    $( "#datepicker" ).datepicker({
        maxDate: "0",
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        buttonImage: "css/images/calendar.png",
        buttonImageOnly: true,
        buttonText: "Select date",
        yearRange: "-123:+nn"
    });
});

和HTML

<label>DOB:</label><input id="datepicker" data-bind="textInput: birthdate">

这里的工作示例http://ouyanews.us/FFtest.html - 只需更改FF浏览器窗口以将后缀标签放入第二行，然后它就应该重新创建问题。

有什么可能是错的？

Answer 1

试用此代码

用以下

替换$( "#datepicker" ).datepicker({ maxDate: "0", changeMonth: true, changeYear: true, showOn: "both", buttonImage: "css/images/calendar.png", buttonImageOnly: true, buttonText: "Select date", yearRange: "-123:+nn", beforeShow: function (input, inst) { setTimeout(function () { inst.dpDiv.css({ top: $("#datepicker").offset().top + 25, left: $("#datepicker").offset().left }); }, 0); } }); 代码

beforeShow

在$( function() { $( "#datepicker" ).datepicker({ maxDate: "0", changeMonth: true, changeYear: true, showOn: "both", buttonImage: "css/images/calendar.png", buttonImageOnly: true, buttonText: "Select date", yearRange: "-123:+nn", beforeShow: function (input, inst) { setTimeout(function () { inst.dpDiv.css({ top: $("#datepicker").offset().top+25, left: $("#datepicker").offset().left }); }, 0); } }); });函数中（在显示日期选择器之前调用），您可以设置datepicker的顶部或左侧位置。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<label>DOB:</label><input id="datepicker" data-bind="textInput: birthdate">

var newArray = Data.filter(function(value){
  return value.DispenseMonth.split('/')[0]!=1;
});

// this will give the array which do not contain objects with month=1
console.log(newArray);

Answer 2

$(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        beforeShow: function (input, inst) {
            var rect = input.getBoundingClientRect();
            setTimeout(function () {
            //Set your datepicker possition
    	        inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
            }, 0);
        }
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <form>
    <input class="datepicker" name="date2" type="text">
    </form>

您可以通过将自定义样式应用于inst.dpDiv来自定义弹出位置。希望这会对你有所帮助。

问候！