Calendario Check-in Check-out da integrare in un form

felino

Calendario Check-in Check-out da integrare in un form

Salve ragazzi,
ho un form per un B&B e vorrei utilizzare 2 campi data per inserire la data di Check-in e Check-out.
Ho trovato proprio JS carino, ma vorrei utilizzare qualcosa di più avanzato, cioè se io in check-in metto 27/05/2011 vorrei che il campo check-out partisse automaticamente da 28/05/2011 perchè capita spesso che la gente sbaglia a selezionare mese e giustamente si crea confusione.

Un aiuto? Grazie!

marcocarrieri

Credo si potrebbe farlo aggiungendo a mano il codice al click.
Dipende anche dal codice usato se è abbastanza maneggevole.
Che script è?

felino

E' composto da più file, l'ho usato in questa pagina web:

bbopera.it/prenotazione-last-minute-bed-breakfast-catania. html

Vedendo il sorgente puoi vedere i js utilizzati.

L'ideale sarebbe impostare in Check-in la data del giorno in cui l'utente visiona la pagina e una volta selezionato il check-in impostare il check-out un giorno in più rispetto a quello selezionato!

ayrton2001

Ciao felino,
potresti creare la funzione javascript:


function calculateCheckOut(dateCheckin) {
var data_arr = dateCheckin.split("/");
data_new = new Date(data_arr[2],(data_arr[1]-1),data_arr[0]);
 data_new.setDate(data_new.getDate()+1);
var dateCheckOutGiorno = (data_new.getDate()<10) ? "0" + data_new.getDate().toString() : data_new.getDate().toString(); 
var dateCheckOutMese = (data_new.getMonth()<9) ? "0" + (data_new.getMonth() + 1).toString() : (data_new.getMonth() + 1).toString();
var dateCheckOutAnno = data_new.getFullYear().toString();
var dateCheckOut = dateCheckOutGiorno+"/"+dateCheckOutMese+"/"+dateCheckOutAnno); 
document.getElementById("datacheckout").value = dateCheckOut;
}

Nell'html modifica le righe:
[HTML]
Dal: <input onFocus="showCalendar('',this,this,'','holder',0,30,1)" value="" name="dal" size="10" readonly="readonly" type="text" onchange="calculateCheckOut(this.value)">

Al: <input onFocus="showCalendar('',this,this,'','holder',0,30,1)" value="" name="al" size="10" readonly=" " type="text" id="datacheckout">
[/HTML]

Considera che non ho testato lo script, dunque vi possono essere alcuni errori anche solo di sintassi.

felino

Grazie ayrton2001, l'ho provato, ma non succede nulla!

felino

Ragazzi, nessun aiuto!
Ha un nome preciso questa cosa che cerco io? Così da veder se trovo qualcosa sul web?
Grazie!

ayrton2001

@felino said:

Grazie ayrton2001, l'ho provato, ma non succede nulla!

Se non succede nulla allora vi sarà un errore javascript.
La console degli errori cosa visualizza?

felino

non saprei, non lavoro con js, quindi non so come verificare dov'è il problema!

ayrton2001

Lo testo e ti faccio sapere eventuali correzioni

felino

Grazie!

ayrton2001

testato e funzionante:

javascript da inserire nella pagina prima del tag di chiusura </head>
oppure creare un file js da richiamare (come fai con gli altri js). Ricordati che in quest'ultimo caso nel file .js non devi copiare i tag <script> sia di apertura che di chiusura:


<script type="text/javascript">
function calculateCheckOut() {
dateCheckin = document.getElementById("datacheckin").value;
var data_arr = dateCheckin.split("-");
data_new = new Date(data_arr[2],(data_arr[1]-1),data_arr[0]);
 data_new.setDate(data_new.getDate()+1);
var dateCheckOutGiorno = (data_new.getDate()<10) ? "0" + data_new.getDate().toString() : data_new.getDate().toString(); 
var dateCheckOutMese = (data_new.getMonth()<9) ? "0" + (data_new.getMonth() + 1).toString() : (data_new.getMonth() + 1).toString();
var dateCheckOutAnno = data_new.getFullYear().toString();
var dateCheckOut = dateCheckOutGiorno+"-"+dateCheckOutMese+"-"+dateCheckOutAnno; 
document.getElementById("datacheckout").value = dateCheckOut;
}
</script>

nell'html devi aggiungere i due attributi id e un richiamo alla funzione nell'onfocus


Dal: <INPUT onfocus="showCalendar('',this,this,'','holder',0,30,1)" value="" name="dal" size="10" readonly="readonly" type="text"id="datacheckin">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Al: <INPUT onfocus="calculateCheckOut(); showCalendar('',this,this,'','holder',0,30,1)" value="" name="al" size="10" readonly="readonly" type="text" id="datacheckout">

felino

Che dire...grazie!!!
Funziona alla grande, l'ho provato in locale, domani lo metterò online!

Grazie davvero!