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:// 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 = "<table><tr><td class=\"cellButton\"><a PrevMonth();\" Month\"><<</a></td>" +
"<td class=\"cellMonth\" width=\"80%\" colspan=\"5\">" + MonthNames[m] + " " + y + "</td>" +
"<td class=\"cellButton\"><a NextMonth();\" Month\">>></a></td></tr>" +
"<tr><td> D</td><td> S</td><td> T</td><td> Q</td><td> Q</td><td> S</td><td> S</td></tr>";
var wDay = 1;
var wDate = new Date(y, m, wDay);
if (isLeapYear(wDate)) {
MonthLengths[1] = 29;
} else {
MonthLengths[1] = 28;
}
var dayclass = "";
var isToday = false;
for (var r = 1; r < 7; r++) {
sCal = sCal + "<tr>";
for (var c = 0; c < 7; c++) {
var wDate = new Date(y, m, wDay);
if (wDate.getDay() == c && wDay <= MonthLengths[m]) {
if (wDate.getDate() == sd && wDate.getMonth() == sm && wDate.getFullYear() == sy) {
dayclass = "cellSelected";
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 = "cellToday";
isToday = true;
} else {
dayclass = "cellDay";
isToday = false;
}
if (((now > wDate) && !DisablePast) || (now <= wDate) || isToday) { // >
// user wants past dates selectable
sCal = sCal + "<td class=\"" + dayclass + "\"><a ReturnDay(" + wDay + ");\">" + wDay + "</a></td>";
} else {
// user wants past dates to be read only
sCal = sCal + "<td class=\"" + dayclass + "\">" + wDay + "</td>";
}
wDay++;
} else {
sCal = sCal + "<td class=\"unused\"></td>";
}
}
sCal = sCal + "</tr>";
}
sCal = sCal + "<tr><td colspan=\"4\" class=\"unused\"></td><td colspan=\"3\" class=\"cellCancel\"><a DestroyCalendar();\">Cancel</a></td></tr></table>"
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;
}