16

是否可以更改jQuery UI datepickertop的left位置（获取当前值并更改它们）。请注意，我需要更改位置，而不是像其他示例中那样设置。margin

4

5 回答 5

32

是的。由于始终只有一个日期选择器处于活动状态，因此您可以选择活动日期选择器：

var $datepicker = $('#ui-datepicker-div');

并改变它的位置：

$datepicker.css({
    top: 10,
    left: 10
});

编辑

哇，棘手的一个。如果您在 中设置 top 或 left 位置beforeShow，它会再次被 datepicker 插件覆盖。您必须将 css 更改放入setTimeout：

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

演示：http: //jsfiddle.net/BWfwf/4/

解释setTimeout(function () {}, 0)：为什么 setTimeout(fn, 0) 有时有用？

于 2013-02-28T09:12:45.927 回答
3

如果你真的被卡住了，你可以编辑你的 jquery-ui-[version].custom.js。控制压光机出现位置的函数是：

_findPos: function(obj) { var position, inst = this._getInst(obj), isRTL = this._get(inst, "isRTL");

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
        obj = obj[isRTL ? "previousSibling" : "nextSibling"];
    }

    position = $(obj).offset();
    return [position.left, position.top];
},

我有一些自定义代码使用 CSS3 转换根据其宽度放大或缩小页面。这会抛出日历小部件所依赖的屏幕坐标。我在 _findPos 中添加了一些自定义代码来检测和处理缩放级别。修改后的代码如下所示：

_findPos: function(obj) {
    var position,
        inst = this._getInst(obj),
        isRTL = this._get(inst, "isRTL");

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
        obj = obj[isRTL ? "previousSibling" : "nextSibling"];
    }

    position = $(obj).offset();
    /* Custom Code for Zoom */
    var zoomLevel = 1;
    var minW = 1024;
    if ($(window).width() > minW)
               { zoomLevel = $(window).width() / minW;}
    return [position.left, position.top/zoomLevel];
},
于 2014-05-31T15:32:32.963 回答
2

可能是一个老问题，但今天我自己遇到了这个问题，无法得到其他建议。或者修复它（使用.click(function(){}）并想添加我的两分钱。

我有一个带有 id 的输入字段sDate，单击该字段时会显示日期选择器。

我为解决这个问题所做的就是在该#sDate字段中添加一个点击例程。

$('#sDate').click(function(){  //CHANGE sDate TO THE ID OF YOUR INPUT FIELD 
    var pTop = '10px';  //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING
    var pLeft = '10px';  //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING
    $('#ui-datepicker-div').css({'left':pLeft, 'top':pTop});
});
于 2014-11-27T09:51:26.947 回答
0

只要您在代码中调用 datepicker 后运行它，您的解决方案就可以工作，我之前尝试调用它但它不起作用，所以我试图了解它是如何为您工作的。

我已经在固定在页面顶部滚动的输入字段的上下文中调整了日期选择器。datepicker 丢失了......这是我在 datepicker 上下文中适应的示例代码，它变得动态固定：

w3schools.com 上的示例：https ://www.w3schools.com/howto/howto_js_sticky_header.asp

HTML：

  <div class="padding-16 center" id="resa_nav">
      <div style="margin: 24px 0 0;">
            <label for="date_selector"
            class="text-gray">Choose a date</label>
            &nbsp;
            <input type="text" id="date_selector" name="date_selector" class="padding-small">
       </div>
   </div>

CSS：

.sticky {
position: fixed;
top: 0;
width: inherit;
background: white;
box-shadow: 0px 0px 7px 4px #69696969;
}

JS：

// init datepicker
$('#date_selector').datepicker();

// When the user scrolls the page, execute myFunction
window.onscroll = function() { myFunction() };

// Get the header
var header = document.getElementById('resa_nav');

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {

        if (window.pageYOffset > sticky) {

                // set block sticky
                header.classList.add('sticky');

                // adjust datepicker position
                // attach a namespace for unbind click later in "non-sticky" context
                $('#date_selector').on('click.sticked', function(){

                        var top = '10px';
                        var left = '10px';

                        $('#ui-datepicker-div').css({'left': left, 'top': top});
                });

        }
        else {

                // remove sticky
                header.classList.remove('sticky');

                // unbind the second event 'click' for retrieve the 
                // default of settings in "non-sticky" context
                $('#date_selector').off('click.sticked');
      }
}
// END FUNCTION

希望有所帮助！

于 2020-01-19T22:14:25.630 回答
0

只需为 datepicker 添加如下 css

.datepicker {
    top: -150px; 
    /* adjust value as per requirement. if not work try with addin !important*/
}
于 2021-06-02T05:59:31.787 回答