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

This message was edited 1 time. Last update was at 21/07/2011 17:17:26

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.

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:

// 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";

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;
    }

Notícias, artigos e o maior fórum brasileiro sobre Java