Question

所以我希望我的日期选择器能够在输入之上，我得到了这个代码，这个代码正在jsfiddle上工作但是当我自己运行它时，没有任何反应。如果出现问题，你能告诉我吗？

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: -200,
                left: 100
            });
        }, 0);
    }
});
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

Answer 1

jsFiddle默认在窗口加载时加载jQuery。您需要将代码包装在document ready call：

中

$(document).ready(function () {
    $("#datepicker").datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: -200,
                    left: 100
                });
            }, 0);
        }
    });
})

或在页面中的元素存在之后通过将代码移动到结束正文标记之前的页面末尾来运行它。

Answer 2

我回答这个问题有点迟，但我希望它能帮助其他人。

 $('.txtDate').datepicker({
       beforeShow: function (textbox, instance) {
           var txtBoxOffset = $(this).offset();
           var top = txtBoxOffset.top;
           var left = txtBoxOffset.left;
           //console.log('top: ' + top + 'left: ' + left);
                   setTimeout(function () {
                       instance.dpDiv.css({
                           top: top-190,
                           left: left
                   });
               }, 0);

       }

将Jquery UI datepicker定位更改为top

2 个答案: