jquery UI datepicker 弹出位置样式自定义代码样例

向老外学习代码研究的真透彻。

quote:

First I think there should be a

afterShowing

method in the datepicker object, where you could change the position after jquery has done all its voodoo in the

_showDatepicker

method. Additionally, a parameter called

preferedPosition

would be also desirable, so you could set it and jquery modify it in case the dialog is rendered outside the viewport.

There's a "trick" to do this last thing. If you study the

_showDatepicker

method, you will see the use of a private variable

$.datepikcer._pos

. That variable will be setup if nobody has set it up before. If you modify that variable
before showing the dialog, Jquery will take it and will try to allocate the dialog in that position, and if it renders out of the screen, it will adjust it to make sure it is visible. Sounds good, eh?

Problem is;

_pos

is private, but if you don't mind that. You can:

$('input.date').datepicker({
beforeShow: function(input, inst)
{
$.datepicker._pos = $.datepicker._findPos(input); //this is the default position
$.datepicker._pos[0] = whatever; //left
$.datepicker._pos[1] = whatever; //top
}
});

But be careful of Jquery-ui updates, because a change in the internal implementation of the

_showDatepicker

might break your code.

mycode:

$('#<%= StartTime.ClientID%>,#<%= EndTime.ClientID%>').datetimepicker({ showSecond: true, timeFormat: 'hh:mm:ss', stepHour: 1, stepMinute: 1, stepSecond: 1, beforeShow: function (input, inst) { $.datepicker._pos = $.datepicker._findPos(input); //this is the default position // $.datepicker._pos[0] = whatever; //left $.datepicker._pos[1] = 46; //top inst.dpDiv.css('font-size' ,'30%'); }, });

不同浏览器样式不兼容，改用： beforeShow: function (a, b) { var cnt = 0; var interval = setInterval(function () { cnt++; if (b.dpDiv.is(":visible")) { var parent = b.input.closest("div"); b.dpDiv.position({ my: "left top", at: "left bottom", of: parent }); clearInterval(interval); } else if (cnt > 50) { clearInterval(interval); } }, 10); b.dpDiv.css('font-size','62.5%'); }