Javascript: Pegar posição na tela do componente em foco

Assuntos Gerais
#1

Galera, eu tenho essas funções que mostram um calendário e devolve a data selecionada. Porém, como fazer pro calendário aparecer do lado direito do componente?

Eu tenho um form com input=text nele pra preencher com a data. Gostaria de selecionar o campo (onClick) e aparecer o calendário ao lado direito do campo, mas não sei como fazer isso.

l = dest.scrollLeft; t = dest.scrollTop;

Essas linhas que posicionam o calendário na página, mas não sei como pegar a posição do text pra posicionar automaticamente. (dest é o elemento que eu passo por parâmetro GetDate(this) no HTML)

Código completo das funções:

[code]// User Changeable Vars
var HighlightToday = true; // use true or false to have the current day highlighted
var DisablePast = true; // use true or false to allow past dates to be selectable
// The month names in your native language can be substituted below
var MonthNames = new Array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");

// Global Vars
var now = new Date();
var dest = null;
var ny = now.getFullYear(); // Today's Date
var nm = now.getMonth();
var nd = now.getDate();
var sy = 0; // currently Selected date
var sm = 0;
var sd = 0;
var y = now.getFullYear(); // Working Date
var m = now.getMonth();
var d = now.getDate();
var l = 0;
var t = 0;
var MonthLengths = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

/*
Function: GetDate(control)

Arguments:
control = ID of destination control
*/
function GetDate() {
    EnsureCalendarExists();
    DestroyCalendar();
    // One arguments is required, the rest are optional
    // First arguments must be the ID of the destination control
    if (arguments[0] == null || arguments[0] == "") {
        // arguments not defined, so display error and quit
        alert("ERROR: Destination control required in function call GetDate()");
        return;
    } else {
        // copy argument
        dest = arguments[0];
    }
    y = now.getFullYear();
    m = now.getMonth();
    d = now.getDate();
    sm = 0;
    sd = 0;
    sy = 0;
    var cdval = dest.value;


    //  l = dest.offsetLeft; // + dest.offsetWidth;
    //  t = dest.offsetTop - 125;   // Calendar is displayed 125 pixels above the destination element
    //  if(t<0) { t=0; }      // or (somewhat) over top of it. ;)

    /* Calendar is displayed 125 pixels above the destination element
    or (somewhat) over top of it. ;)*/
    l = dest.scrollLeft;
    t = dest.scrollTop;
    if (t < 0) t = 0; // >
    DrawCalendar();
}

/*
function DestoryCalendar()

Purpose: Destory any already drawn calendar so a new one can be drawn
*/
function DestroyCalendar() {
    var cal = document.getElementById("dpCalendar");
    if (cal != null) {
        cal.innerHTML = null;
        cal.style.display = "none";
    }
    return
}

function DrawCalendar() {
    DestroyCalendar();
    cal = document.getElementById("dpCalendar");
    cal.style.left = l + "px";
    cal.style.top = t + "px";

    var sCal = &quot;&lt;table&gt;&lt;tr&gt;&lt;td class=\"cellButton\"&gt;<a  PrevMonth();\"  Month\">&lt;&lt;</a>&lt;/td&gt;" +
"&lt;td class=\"cellMonth\" width=\"80%\" colspan=\"5\"&gt;" + MonthNames[m] + " " + y + "&lt;/td&gt;" +
"&lt;td class=\"cellButton\"&gt;<a  NextMonth();\"  Month\">&gt;&gt;</a>&lt;/td&gt;&lt;/tr&gt;" +
"&lt;tr&gt;&lt;td&gt; D&lt;/td&gt;&lt;td&gt; S&lt;/td&gt;&lt;td&gt; T&lt;/td&gt;&lt;td&gt; Q&lt;/td&gt;&lt;td&gt; Q&lt;/td&gt;&lt;td&gt; S&lt;/td&gt;&lt;td&gt; S&lt;/td&gt;&lt;/tr&gt;&quot;;
    var wDay = 1;
    var wDate = new Date(y, m, wDay);
    if (isLeapYear(wDate)) {
        MonthLengths[1] = 29;
    } else {
        MonthLengths[1] = 28;
    }
    var dayclass = &quot;&quot;;
    var isToday = false;
    for (var r = 1; r &lt; 7; r++) {
        sCal = sCal + &quot;&lt;tr&gt;&quot;;
        for (var c = 0; c &lt; 7; c++) {
            var wDate = new Date(y, m, wDay);
            if (wDate.getDay() == c && wDay &lt;= MonthLengths[m]) {
                if (wDate.getDate() == sd && wDate.getMonth() == sm && wDate.getFullYear() == sy) {
                    dayclass = &quot;cellSelected&quot;;
                    isToday = true;  // only matters if the selected day IS today, otherwise ignored.
                } else if (wDate.getDate() == nd && wDate.getMonth() == nm && wDate.getFullYear() == ny && HighlightToday) {
                    dayclass = &quot;cellToday&quot;;
                    isToday = true;
                } else {
                    dayclass = &quot;cellDay&quot;;
                    isToday = false;
                }
                if (((now &gt; wDate) && !DisablePast) || (now &lt;= wDate) || isToday) { // &gt;
                    // user wants past dates selectable
                    sCal = sCal + &quot;&lt;td class=\"" + dayclass + "\"&gt;<a  ReturnDay(" + wDay + ");\">" + wDay + "</a>&lt;/td&gt;";
                } else {
                    // user wants past dates to be read only
                    sCal = sCal + "&lt;td class=\"" + dayclass + "\"&gt;" + wDay + "&lt;/td&gt;";
                }
                wDay++;
            } else {
                sCal = sCal + "&lt;td class=\"unused\"&gt;&lt;/td&gt;";
            }
        }
        sCal = sCal + "&lt;/tr&gt;";
    }
    sCal = sCal + "&lt;tr&gt;&lt;td colspan=\"4\" class=\"unused\"&gt;&lt;/td&gt;&lt;td colspan=\"3\" class=\"cellCancel\"&gt;<a  DestroyCalendar();\">Cancel</a>&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"
    cal.innerHTML = sCal; // works in FireFox, opera
    cal.style.display = "inline";
}

function PrevMonth() {
    m--;
    if (m == -1) {
        m = 11;
        y--;
    }
    DrawCalendar();
}

function NextMonth() {
    m++;
    if (m == 12) {
        m = 0;
        y++;
    }
    DrawCalendar();
}

function ReturnDay(day) {
    cDest = document.getElementById(dest);
    dest.value = day + "/" + (m + 1) + "/" + y;
    DestroyCalendar();
}

function EnsureCalendarExists() {
    if (document.getElementById("dpCalendar") == null) {
        var eCalendar = document.createElement("div");
        eCalendar.setAttribute("id", "dpCalendar");
        document.body.appendChild(eCalendar);
    }
}

function isLeapYear(dTest) {
    var y = dTest.getYear();
    var bReturn = false;

    if (y % 4 == 0) {
        if (y % 100 != 0) {
            bReturn = true;
        } else {
            if (y % 400 == 0) {
                bReturn = true;
            }
        }
    }

    return bReturn;
}[/code]
#2