Calendario JS per funzionalità particolare...

**maximum** · 11-07-2003, 11:14

Fate conto che vorrei ottimizzare in una form la possibilità di inserire delle date in formato gg/mm/aaaa.

Al momento controllo già (via JS), che il formato sia del tipo sopra riportato, però volevo potenziare ancora di più la cosa, venendo incontro all'utente che inserisce la data, facendogli risparmiare la digitazione.

Mi spiego:

Vorrei porre accanto all'input type=text dove va la data un pulsantino linkabile, alla pressione del quale mi si apre un calendario (JS) in cui appare il mese in corso, con i giorni linkabili e con il giorno in corso la cui cella risulta evidenziata.
Inoltre cercavo anche la possibilità che lo stesso sia con dei link che mi permettono di scorrere avanti e indietro nel mesi!!!!
L'utente alla pressione del giorno di cui vuole inserire la data, che non deve necessariamente essere quello in corso, ma qualunque, deve chiudere automaticamente il popup e inserire la data nel campo.

Esiste in giro qualcosa che funzioni in tal senso???

Grazie.

**Xinod** · 11-07-2003, 12:28

guarda tra gli script/discussioni utili,
Willybit e Br1 hanno messo su quello che chiedi,
ciao

**maximum** · 11-07-2003, 13:08

Ok, darò un'occhiata.

**Surrender79** · 26-08-2003, 11:24

Visto che anche a me serve una cosa del genere non è che mi potete dire dove trovo questa sezione script/discussioni utili?

**patajanja** · 26-08-2003, 11:36

Ho trovato questo script su un sito.
Purtroppo non ricordo più il sito.

Vi mando il codice perchè non ho uno spazio dove poterlo inserire per farvelo scaricare.

-----------------------------------------------------------
Pagina da cui apro il calendario con nome OpenCalendario.html

<html>
<head>
<title></title>
</head>
<body marginleft="10" marginheight="0" marginwidth="10" topmargin="0" leftmargin="10">

<Div id='popCal' onclick='event.cancelBubble=true' style='POSITION:absolute;visibility:hidden;border: 0px ridge;z-index:100;width:10'>
<iframe name="popFrame" src="popcjs.htm" frameborder="0" scrolling="no" width=183 height=188></iframe>
</DIV>
<SCRIPT event=onclick() for=document>popCal.style.visibility = "hidden";</SCRIPT>
<INPUT name=dc readOnly style="TEXT-ALIGN: center"><INPUT onclick="popFrame.fPopCalendar(dc,dc,popCal);retur n false" type=button value=V>
</body>
</html>

-----------------------------------------------------------
Pagina calendario con nome popcjs.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
body {font-family: verdana,arial; font-size: 10px}
font {font-family: verdana,arial; font-size: 10px; font-weight: bold}
td {font-family: verdana,arial; font-size: 10px; font-weight: bold}
input {font-family: verdana,arial; font-size: 10px}
div {font-family: verdana,arial; font-size: 10px}
option {font-family: verdana,arial; font-size: 10px}
</style>
<title>Untitled</title>
</head>
<body leftmargin=0 topmargin=0 >
<script language="JScript">

var gdCtrl = new Object();
var gcGray = "#808080";
var gcToggle = "#ffff00";
var gcBG = "#cccccc";

var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var VicPopCal = new Object();

//************************************************** **************************
// Param: popCtrl is the widget beyond which you want this calendar to appear;
// dateCtrl is the widget into which you want to put the selected date;
// popCal is the widget to display the calendar;
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc,popCal);return false">
//************************************************** **************************
function fPopCalendar(popCtrl, dateCtrl, popCal){
parent.event.cancelBubble=true;
VicPopCal = popCal;
gdCtrl = dateCtrl;
fSetYearMon(giYear, giMonth);
var point = fGetXY(popCtrl);
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight+1;
visibility = 'visible';
}
VicPopCal.focus();
// in order to make compatible with IE4.x , here I cut two line below off.
// VicPopCal.all("popFrame").width=document.all("popT able").offsetWidth;
// VicPopCal.all("popFrame").height=document.all("pop Table").offsetHeight;
// if u only target on IE5.x, uncommented them and delete the width&height prop in <IFrame> tag
// thus you will find the 3rd para in fDrawCal() now works perfectly.
}

function fSetDate(iYear, iMonth, iDay){
gdCtrl.value = iMonth+"-"+iDay+"-"+iYear; //Here, you could modify the locale as you need !!!!
VicPopCal.style.visibility = "hidden";
}

function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);

aCell.bgColor = gcBG;
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
if (color==gcGray)
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
if (iMonth<1) {
iYear--;
iMonth = 12;
}else if (iMonth>12){
iYear++;
iMonth = 1;
}
}
fSetDate(iYear, iMonth, iDay);
}

function Point(iX, iY){
this.x = iX;
this.y = iY;
}

function fBuildCal(iYear, iMonth) {
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);

var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;

for (d = 0; d < 7; d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}

function fDrawCal(iYear, iMonth, iCellWidth) {
var WeekDay = new Array("Su","Mo","Tu","We","Th","Fr","Sa");
var styleTD = " bgcolor='"+gcBG+"' width='"+iCellWidth+"' bordercolor='"+gcBG+"' valign='middle' align='center'";
var styleTDGiorni = " bgcolor='"+gcBG+"' width='"+iCellWidth+"' bordercolor='"+gcBG+"' valign='middle' align='center' style='cursor:hand;'";

with (document) {
write("<tr>");
for(i=0; i<7; i++)
write("<td "+styleTD+"color:#990099'>" + WeekDay[i] + "</td>");
write("</tr>");

for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td id=calCell "+styleTDGiorni+" onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");
write("<font id=cellText> </font>");
write("</td>")
}
write("</tr>");
}
}
}

function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d]) {
Victor = i++;
if (myMonth[w+1][d]<0) {
color = gcGray;
innerText = -myMonth[w+1][d];
}else{
color = ((d==0)||(d==6))?"red":"black";
innerText = myMonth[w+1][d];
}
}
}

function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
fUpdateCal(iYear, iMon);
}

function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;

if (--iMon<1) {
iMon = 12;
iYear--;
}

fSetYearMon(iYear, iMon);
}

function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;

if (++iMon>12) {
iMon = 1;
iYear++;
}

fSetYearMon(iYear, iMon);
}

function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}

var gMonths = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","A ug","Sep","Oct","Nov","Dec");

with (document) {
write("<table id='popTable' border='0' bgcolor='#6699cc'>");
write("<TR>");
write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20; Fixedsys' onClick='fPrevMonth()'>");
write("<select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</SELECT>");
write("<SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=1990;i<2015;i++)
write("<OPTION value='"+i+"'>"+i+"</OPTION>");
write("</SELECT>");
write("<input type='button' name='PrevMonth' value='>' style='height:20;width:20; Fixedsys' onclick='fNextMonth()'>");
write("</td>");
write("</TR><TR>");
write("<td align='center'>");
write("<DIV style='background-color:teal;'><table width='100%' border='0' cellpadding='2'>");
fDrawCal(giYear, giMonth, 19);
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align='center'>");
write("<font style='cursor:hand; Fixedsys' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>Today:"+gMonths[giMonth-1]+""+giDay+","+giYear+"</font>");
write("</TD></TR>");write("</TD></TR>");
write("</TABLE>");
}
</script>
</body>
</html>

Ciao

Discussione: Calendario JS per funzionalità particolare...

Strumenti discussione

Ricerca discussione

Visualizza

Calendario JS per funzionalità particolare...

Permessi di invio