Piccolo Webmaster: [CSS] – [JAVASCRIPT] - [ASP] - Form con campi data e calendario css

Form con due campi data e calendario css.

Codice utilizzato: ASP VBScript

Range di date non superiore a 31 giorni.

Controlli su date inserite.

Utilizza i Cookie per memorizzare le date temporaneamente.

Lo script è composto dalle pagine:

form.asp (la pagina con il form)

calendario_css.asp (il calendario vero e proprio)

css/calendario.css (css per il calendario da mettere nella cartella css).

css/css_pagina.css (css della pagina centrata in un box)

js/calendario.js (funzioni javascript per il calendario da mettere nella cartella js)

PAGINA form.asp

<%@LANGUAGE="VBSCRIPT"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>TITOLO</title>

function procedi(ind)

{

err=false //variabile che mi dice se ci sono errori

cont=0 //contatore errori

campi=0 //campo che non è stato valorizzato

str = new Array();

//str[1] = "DATA INIZIALE";

//str[2] = "DATA FINALE";

//PER IL CONTROLLO DELLA DATA

//POSIZIONARLO PRIMA DEGLI ALTRI CONTROLLI

//COSI' CHE SE RESTITUISCE ERROR=FALSE

//NON SOVRASCRIVE EVENTUALI ERRORI PRECEDENTI

//****************************************

data_dal_ggmmaaaa = document.info.data_dal.value;

data_al_ggmmaaaa = document.info.data_al.value;

//data_oggi = document.info.data_oggi.value;

//CONTROLLIAMO LE DATE SOLO SE CI SONO!

if(!(document.info.data_dal.value=="") && !(document.info.data_al.value==""))

{

ControllaData(data_dal_ggmmaaaa, data_al_ggmmaaaa);

}

//****************************************

/* if(document.info.data_dal.value=="")

{err=true;++cont;campi=1;}

if(document.info.data_al.value=="")

{err=true;++cont;campi=2;}*/

if(err==false)

{

//possiamo andare avanti

//PER IL CALENDARIO CSS

//********************************************

vai(ind)

//********************************************

}

else

{

//messaggio di errore

if(cont!=1)

{

alert("Attenzione Non hai compilato alcuni campi obbligatori")

}

else

{

alert("Seleziona " + str[campi])

}

</script>

</script>

</script>

'PER IL CALENDARIO

'******************************************************************

'******************************************************************

</head>

<body>

'PAGINA DEL CALENDARIO INCLUSA TRA IL TAG DIV CON ID CALENDARIO

'**************************************************************

'**************************************************************

'RICHIAMO DELLE FUNZIONI PER VISUALIZZARE/NASCONDERE IL CALENDARIO

'**************************************************************

calendario_vis = Request.QueryString("calendario_vis")

if calendario_vis = "SI" then

mostra_calendario();

</script>

else

nascondi_calendario();

</script>

end if

'**************************************************************

<h1>titolo</h1>

'PER IL CALENDARIO

'**********************************************************

'**********************************************************

<p>

periodo = request.QueryString("periodo")

if periodo = "SI" then

checked = " checked=""checked"" "

si_no = "NO"

disabled = " "

else

checked = " "

si_no = "SI"

disabled = " disabled=""disabled"" "

end if

<input type="checkbox" name="periodo" id="periodo" <%=checked%> onclick="location.href='nuova_pagina.asp?periodo=<%=si_no%>'" />

Attiva/Disattiva Intervallo Periodo

</p>

<p>

dal

type="text"

id="data_dal"

onclick="mostra_calendario('data_dal')"

size="10" maxlength="10" readonly="true" />

type="text"

id="data_al"

onclick="mostra_calendario('data_al');"

size="10" maxlength="10" readonly="true" />

</p>

<p>* IL RANGE TEMPORALE NON PUO' ESSERE SUPERIORE A 31 GIORNI.</p>

<p>

</p>

</form>

</div>

</body>

</html>

PAGINA calendario_css.asp

'NOME DELLA PAGINA IN CUI SIAMO PRESO AUTOMATICAMENTE DALL'URL

'*****************************************************

' Assegna l'URL della pagina corrente

strURL = Request.ServerVariables("URL")

' Splitta il percorso ai valori /

aryURL = Split(strURL, "/")

' Prendi l'ultimo elemento dell'array

strPagina = aryURL(Ubound(aryURL))

' Stampa il valore

'Response.Write(strPagina)

'LINK CHE SERVIRA' ALLA PAGINA DEL CALENDARIO

'NOME DELLA PAGINA IN CUI E' INCLUSO QUESTO CALENDARIO

'*****************************************************

link = strPagina

'*****************************************************

Function nome_esteso(mese)

nome_esteso = split(Formatdatetime(mese, vblongdate))(2)

nome_esteso = Ucase(Left(nome_esteso,1)) & Mid(nome_esteso,2) & " " & year(mese)

End function

Function festa(giorno)

data_corrente = giorno & "/" & month(inizio_mese_corrente) & "/" & anno

If data_corrente = Pasqua or data_corrente = Pasquetta or data_corrente = "1/1/" & anno or data_corrente = "6/1/" & anno or data_corrente = "1/1/" & anno or data_corrente = "25/4/" & anno or data_corrente = "1/5/" & anno or data_corrente = "15/8/" & anno or data_corrente = "1/11/" & anno or data_corrente = "8/12/" & anno or data_corrente = "25/12/" & anno or data_corrente = "26/12/" & anno then

festa = true

Else

festa = false

End if

End function

</head>

<tr>

nomeform = Request.Querystring("nomeform")

nomecampo = Request.Querystring("nomecampo")

inizio_mese_corrente = Request.QueryString("inizio_mese_corrente")

If inizio_mese_corrente = "" then

inizio_mese_corrente = cdate("01/" & month(date) & "/" & year(date))

Else

inizio_mese_corrente = cdate(inizio_mese_corrente)

End if

inizio_mese_precedente = DateAdd("m", -1, inizio_mese_corrente)

inizio_mese_successivo = DateAdd("m", 1, inizio_mese_corrente)

'Determino le festività

'Pasqua

Anno = year(inizio_mese_corrente)

A = Anno Mod 19

B = Anno 100

C = Anno Mod 100

D = B 4

E = B Mod 4

F = (B + 8) 25

G = (B - F + 1) 3

H = (19 * A + B - D - G + 15) Mod 30

I = C 4

K = C Mod 4

L = (32 + E + E + I + I - H - K) Mod 7

M = (A + 11 * H + 22 * L) 451

N = (H + L - 7 * M + 114)

Mese = N 31

Giorno = (N Mod 31) + 1

Pasqua = Cdate(Giorno & "/" & Mese & "/" & Anno)

Pasquetta = DateAdd("d", 1, Pasqua)

Pasqua = Replace(Pasqua,"/03/", "/3/")

Pasqua = Replace(Pasqua,"/04/", "/4/")

Pasquetta = Replace(Pasquetta,"/03/", "/3/")

Pasquetta = Replace(Pasquetta,"/04/", "/4/")

primo_lun = inizio_mese_corrente

Do while not DatePart("w", primo_lun, 2) = 1

primo_lun = primo_lun + 1

Loop

primo_lun = day(primo_lun)

If primo_lun = 1 then

giorno_set = 1

Else

giorno_set = 9 - primo_lun

End if

ultimo_giorno_mese = DateAdd("m", 1, inizio_mese_corrente)

ultimo_giorno_mese = DateAdd("d", -1, ultimo_giorno_mese)

<tr>

<td width="20"><font color="#FFCC00"><a href="javascript:cambio_pagina('<%=link%>?calendario_vis=SI&inizio_mese_corrente=<%= inizio_mese_precedente%>')"><<</a></font></td>

<td width="20" align="right"><a href="javascript:cambio_pagina('<%=link%>?calendario_vis=SI&inizio_mese_corrente=<%= inizio_mese_successivo%>')">>></a></td>

</tr>

</table>

</tr>

</tr>

</tr>

For i = 1 to 7

<td>

If i >= giorno_set then

giorno_corrente = giorno_corrente + 1

If i = 7 or festa(giorno_corrente) = true then

Else

End if

</td>

</tr>

For i = 1 to 7

<td>

giorno_corrente = giorno_corrente + 1

If i = 7 or festa(giorno_corrente) = true then

Else

End if

</td>

</tr>

For i = 1 to 7

<td>

giorno_corrente = giorno_corrente + 1

If i = 7 or festa(giorno_corrente) = true then

Else

End if

</td>

</tr>

For i = 1 to 7

<td>

giorno_corrente = giorno_corrente + 1

If giorno_corrente <= day(ultimo_giorno_mese) then

If i = 7 or festa(giorno_corrente) = true then

Else

End if

</td>

</tr>

For i = 1 to 7

<td>

giorno_corrente = giorno_corrente + 1

If giorno_corrente <= day(ultimo_giorno_mese) then

If i = 7 or festa(giorno_corrente) = true then

Else

End if

Else

End if

</td>

</tr>

For i = 1 to 7

<td>

giorno_corrente = giorno_corrente + 1

If giorno_corrente <= day(ultimo_giorno_mese) then

If i = 7 or festa(giorno_corrente) = true then

Else

End if

Else

End if

</td>

</tr>

</tr>

'QUESTO COLLEGAMENTO HA DUE INDIRIZZI UGUALI PERCHE'

'CON EXPLORER FUNZIONA L'HREF MA NON FA FUNZIONARE GLI ALTRI BROWSER

'GLI ALTRI BROWSER SE C'è HREF NON FANNO FUNZIONARE

<td height="20" colspan="7" align="center"><a href="javascript:chiudi_finestra('<%=link%>')">Chiudi</a></td>

</tr>

</table></td>

</tr>

</table>

</div>

</form>

PAGINA css/calendario.css

@charset "utf-8";

/* CSS Document */

/*STILE DEL CALENDARIO*/

.testobianco12B {

font-family: Arial, Helvetica, sans-serif; font-size: 12px;

font-color: #FFFFFF;

color: #FFFFFF;

font-weight: bold;

text-align:center;

}

#calendario{

display: none;

position: absolute;

left: 0px;

top: 0px;

height: 100%;

width: 100%;

background-color: BLACK;

color: BLACK;

opacity: 0.9;

filter: alpha(opacity=90);

text-align: center;

padding-top: 100px;

}

#sfondo_calendario{

background-color: #8eaa7b;

color: #8e2b7b;

text-align:center;

}

PAGINA css/css_pagina

@charset "utf-8";

/* CSS Document */

body{

background-color:#8eaa7b;

background-image:url(../images/sfondo_xxx_700x1.jpg);

color:#FFF;

SCROLLBAR-FACE-COLOR: #2a2f45;

SCROLLBAR-HIGHLIGHT-COLOR: #2a2f45;

SCROLLBAR-SHADOW-COLOR: #bdbebd;

SCROLLBAR-3DLIGHT-COLOR: #bdbebd;

SCROLLBAR-ARROW-COLOR: #ffffff;

SCROLLBAR-TRACK-COLOR: #3b4162;

SCROLLBAR-DARKSHADOW-COLOR: #102810;

}

h1{

color:#fff4a9;

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

}

#container{

width:680px;

height:495px;

margin:auto;

border-top:10px solid #FFF;

border-bottom:10px solid #FFF;

border-left:10px solid #FFF;

border-right:10px solid #FFF;

}

.border-top-left{

background: url(../images/roller.gif) no-repeat;

position:absolute;

z-index:100;

}

#title{

width:680px;

height:158px;

text-align:center;

background-image:url(../images/top.gif);

}

#corpo{

width:660px;

height:317px;

color:#fff;

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

padding:10px;

overflow:auto;

}

#corpo a{

color:#fff4a9;

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

text-decoration:none;

}

#corpo a:hover{

color:#fff;

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

text-decoration:none;

}

#attesa{

text-align:center;}

PAGINA js/calendario.js

// JavaScript Document

//FUNZIONI PER IL CORRETTO FUNZIONAMENTO DEL CALENADRIO

//*****************************************************

function mostra_calendario(nome_campo)

{

document.getElementById("calendario").style.display = 'block';

//ASSEGNA IL VALORE E LO MEMORIZZA IN XX

var xx = document.getElementById("valore_temp").value = nome_campo;

}

function nascondi_calendario()

{

document.getElementById("calendario").style.display = 'none';

}

function vai(pPagina)

{

//CANCELLIAMO I COOKIE DELLE DATE

deleteCookie( 'data_dal' );

deleteCookie( 'data_al' );

document.info.method="post";

document.info.action=pPagina;

document.info.submit();

}

//LETTURA COOKIE

//ESEMPIO: var res = getCookie( 'variabile' );

function getCookie( name ) {

var start = document.cookie.indexOf(name+"=");

var len = start+name.length+1;

if ((!start) && (name != document.cookie.substring(0,name.length))) return(null);

if (start == -1) return(null);

var end = document.cookie.indexOf(";",len);

if (end == -1) end = document.cookie.length;

return(unescape(document.cookie.substring(len,end)) );

}

//SCRITTURA COOKIE

//ESEMPIO: setCookie( 'variabile', 'valore', 10 );

//function setCookie(name, value, expiredays, path, domain, secure) {

function setCookie(name, value, expiredays, path, domain, secure) {

var expires = new Date();

expires.setDate( expires.getDate() + expiredays );

var cookieString = name + "=" +escape(value) +

( (expires) ? ";expires=" + expires.toGMTString() : "") +

( (path) ? ";path=" + path : "") +

( (domain) ? ";domain=" + domain : "") +

( (secure) ? ";secure" : "");

document.cookie = cookieString;

}

//ELIMINAZIONE COOKIE

//ESEMPIO: deleteCookie( 'variabile' );

function deleteCookie(name, path, domain) {

if (getCookie(name)) document.cookie = name + "=" +

( (path) ? ";path=" + path : "") +

( (domain) ? ";domain=" + domain : "") +

";expires=Thu, 01-Jan-70 00:00:01 GMT";

}

//FUNZIONE CHE PRENDE UN VALORE DALLA QUERYSTRING DELL'URL

//DOBBIAMO PASSARGLI IL NOME DEL VALORE DI CUI ABBIAMO BISOGNO

function getQSParam(ParamName) {

// Memorizzo tutta la QueryString in una variabile

QS=window.location.toString();

// Posizione di inizio della variabile richiesta

var indSta=QS.indexOf(ParamName);

// Se la variabile passata non esiste o il parametro è vuoto, restituisco null

if (indSta==-1 || ParamName=="") return null;

// Posizione finale, determinata da una eventuale & che serve per concatenare più variabili

//var indEnd=QS.indexOf('&',indSta);

var indEnd=QS.indexOf('&',indSta);

// Se non c'è una &, il punto di fine è la fine della QueryString

if (indEnd==-1) indEnd=QS.length;

// Ottengo il solore valore del parametro, ripulito dalle sequenze di escape

var valore = unescape(QS.substring(indSta+ParamName.length+1,indEnd));

// Restituisco il valore associato al parametro 'ParamName'

return valore;

}

//INSERISCE LA DATA NEL CAMPO DATA_DAL O DATA_AL

function inser_data(var_data) {

nome_campo = document.getElementById("valore_temp").value;

//SE IL CAMPO E' INDEFINITO PERCHE' ABBIAMO CAMBIATO MESE

//PRENDIAMO IL NOME DEL CAMPO DALLA QUERYSTRING DELL'URL

if (nome_campo == "undefined" || nome_campo == "")

{

nome_campo= getQSParam("nome_campo")

}

//COOKIE

//MEMORIZZIAMO I VALORI DI DATA_DAL O DATA_AL INSERITI PRECEDENTEMENTE

//IN DEI COOKIE CHE RICHIAMEREMO AL MOMENTO DELL'INSERIMENTO

//SE IL CAMPO DA INSERIRE E' DATA_DAL PRENDIAMO IL COOKIE DI DATA_AL

//ALTRIMENTI IL CONTRARIO

if (nome_campo == "data_dal"){

setCookie( 'data_dal', var_data, 1 );

var data_dal = var_data;

var data_al = getCookie( 'data_al' );

if (data_al == null || data_al == ""){

data_al = data_dal;

}

if (nome_campo == "data_al"){

setCookie( 'data_al', var_data, 1 );

var data_al = var_data;

var data_dal = getCookie( 'data_dal' );

if (data_dal == null || data_dal == ""){

data_dal = data_al;

}

//INSERISCE NEI RISPETTIVI CAMPI I VALORI DELLE DATE

document.getElementById("data_dal").value = data_dal;

document.getElementById("data_al").value = data_al;

//NASCONDIAMO IL CALENDARIO

nascondi_calendario();

}

//FUNZIONE PER CAMBIARE MESE NEL CALENDARIO

function cambio_pagina(url){

//QUESTA PARTE E' UNA PARTE DI TEST (IN PIU')

//ATTUALMENTE NON UTILIZZATA MA CHE POTREBBE SERVIRE PER IMPLEMENTAZIONI DIVERSE.

//*******************************************************************************

//VEDIAMO SE E' LA PRIMA VOLTA CHE CAMBIAMO MESE

//SERVE POI A NON CANCELLARE I CAMPI INSERITI FINO ADESSO

nofirst_dal= getQSParam("nofirst_dal")

nofirst_al= getQSParam("nofirst_al")

if(!(nofirst_dal==1)){

var data_dal = document.getElementById("data_dal").value;

}

else

{

data_dal= getQSParam("data_dal")

}

if(!(nofirst_al==1)){

var data_al = document.getElementById("data_al").value;

}

else

{

data_al= getQSParam("data_al")

}

//*******************************************************************************

//RIPRENDIAMO IL NOME DEL CAMPO SE ABBIAMO PERSO IL VALORE

var nome_campo = document.getElementById("valore_temp").value;

if (nome_campo == "undefined" || nome_campo == "")

{

nome_campo= getQSParam("nome_campo")

}

//COSTRUZIONDE DELL'URL CON PRESENZA DEL "NOFIRST"

//CON QUESTA IMPLEMENTAZIONE IN REALTA' BASTEREBBE UN SOLO INDIRIZZO UGUALE

//PER ENTRAMBI.

//POTREBBE SERVIRE PER ALTRA IMPLEMENTAZIONE

if(nome_campo == "data_dal"){

var url_completo = url + "&nome_campo=" + nome_campo + "&data_dal=" + data_dal + "&data_al=" + data_al + "&nofirst_dal=1&periodo=SI";

}

else

{

var url_completo = url + "&nome_campo=" + nome_campo + "&data_dal=" + data_dal + "&data_al=" + data_al + "&nofirst_al=1&periodo=SI";

}

//REINDIRIZZAMENTO ALLA PAGINA DEL MESE SUCCESSIVO O PRECEDENTE

location.href=url_completo;

}

//CHIUSURA DELLA FINESTRA

function chiudi_finestra(pagina) {

//PRENDIAMO I VALORI DELLE DATE DAI COOKIE

var data_al = getCookie( 'data_al' );

var data_dal = getCookie( 'data_dal' );

//INSERISCE NEI RISPETTIVI CAMPI I VALORI DELLE DATE
if (data_dal == null || data_dal == ""){
document.getElementById("data_dal").value = "";
}
else{
document.getElementById("data_dal").value = data_dal;
}

if (data_al == null || data_al == ""){
document.getElementById("data_al").value = "";
}
else{
document.getElementById("data_al").value = data_al;

}

//NASCONDIAMO IL CALENDARIO

nascondi_calendario();

}

Piccolo Webmaster

venerdì 13 agosto 2010

[CSS] – [JAVASCRIPT] - [ASP] - Form con campi data e calendario css

Nessun commento: