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 calledpreferedPosition 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%'); }