Question

这是fiddle。

HTML：

<input data-role="date" type="text">

JavaScript的：

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("top", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
};

$("datepickerinput").datepicker({
    beforeShow: function(input, inst) {
        $(".ui-datepicker").center();
    }
});

我似乎无法操纵beforeShow事件以使日历显示在中心。

Answer 1

对于日期选择器的中心对齐，请尝试以下代码。我给了100分左，你可以根据你的改变。

$(document).on("click","#date1",function(){
// $("#ui-datepicker-div").attr('align', 'center');
$("#ui-datepicker-div").css({left: 100, position:'absolute'});
});

参考此 FIDDLE DEMO

Answer 2

好的，这个答案有完整的解决方案：Fiddle（我调整了@ Aravinth的小提琴。）

$(document).on("click","#datepickerinputtag",function(){
    var viewportwidth = $(window).width();
    var datepickerwidth = $("#ui-datepicker-div").width();
    var leftpos = (viewportwidth - datepickerwidth)/2; //Standard centering method
    $("#ui-datepicker-div").css({left: leftpos,position:'absolute'});
});

你如何让jQuery Mobile的datepicker弹出到场中心而不是左边？

2 个答案: