• Super User

    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!


  • ModSenior

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


  • Super User

    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! :mmm:


  • Super User

    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.


  • Super User

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


  • Super User

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


  • Super User

    @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?


  • Super User

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


  • Super User

    Lo testo e ti faccio sapere eventuali correzioni


  • Super User

    Grazie! 😉


  • Super User

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

  • Super User

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

    Grazie davvero!