Pubblicato il 30/10/13e aggiornato il

Modulo per calcolare l'età di una persona o da quanto tempo un blog è online.

Come inserire in un blog un modulo per calcolare il numero di anni, mesi e giorni che sono trascorsi da un dato evento
Un commento di qualche minuto fa mi ha fatto venire l'idea di creare un modulo per calcolare il numero di anni, mesi e giorni di un evento che può essere la nostra data di nascita o la data in cui per la prima volta abbiamo messo il blog online. I javascript utilizzabili vengono solitamente realizzati per la lingua e per lo stile della data anglosassone o per meglio dire americana. Vale a dire la data di oggi 30 Ottobre 2013 viene indicata come 10/30/2013 invece di 30/10/2013 come siamo abituati in Europa.

Vediamo come realizzare un modulo da inserire in un widget HTML/Javascript o addirittura in un post ovviamente nella modalità HTML che riporta il numero di anni, mesi e giorni che sono trascorsi dal dato evento. Il gadget può essere un modo per incuriosire i visitatori e trattenerli sul nostro sito

calcolare-età-evento

Il primo articolo di questo blog è stato postato il 28 Gennaio 2008 e da allora sono passati esattamente 5 anni, 9 mesi e 2 giorni (sembra ieri N.d.A). Il codice da incollare su Layout > Aggiungi un gadget > HTML/Javascript è il seguente

<div style="border: 1px solid black; padding-left: 10px;">
<script type="text/javascript">
        function Calcola_eta() {       
            var inputdob = document.getElementById("txtDOB").value;           
            var rex = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d+$/;
            if (rex.test(inputdob)) {               
                var DOBDate = new Date(inputdob);               
                var currentDate = new Date();
                var monthDiff = currentDate.getMonth() - DOBDate.getMonth();
                var yearDiff = currentDate.getFullYear() - DOBDate.getFullYear();
                var dayDiff = currentDate.getDate() - DOBDate.getDate();
                if (isNaN(yearDiff)) {                    document.getElementById("lblAgeMesg").innerHTML = "Input date is incorrect.";
                }
                else {               
                    if (monthDiff < 0 ) {
                        yearDiff = parseInt(yearDiff,10) - 1;
                        monthDiff= 12 + parseInt(monthDiff,10);
                        if(dayDiff < 0){
                          monthDiff = parseInt(monthDiff,10)-1;
                          dayDiff = 30 + parseInt(dayDiff,10);
                          document.getElementById('lblAgeMesg').innerHTML = 'Età di: ' + yearDiff + ' anni ' + monthDiff + ' mesi ' + dayDiff + ' giorni';
                        }
                        else{
                          document.getElementById('lblAgeMesg').innerHTML = 'Età di: ' + yearDiff + ' anni ' + monthDiff + ' mesi ' + dayDiff + ' giorni';
                        }
                    }
                    else {
                        if(monthDiff==0){
                            yearDiff = parseInt(yearDiff,10) - 1;
                            if(dayDiff < 0){                             
                              dayDiff = 30 + parseInt(dayDiff,10);
                              document.getElementById('lblAgeMesg').innerHTML = 'Età di: ' + yearDiff + ' anni ' + monthDiff + ' mesi ' + dayDiff + ' giorni';
                            }
                            else{
                              document.getElementById('lblAgeMesg').innerHTML = 'Età di: ' + yearDiff + ' anni ' + monthDiff + ' mesi ' + dayDiff + ' giorni';
                            }
                        }
                        else{
                            if(dayDiff < 0){
                                  monthDiff = parseInt(monthDiff,10)-1;
                                  dayDiff = 30 + parseInt(dayDiff,10);
                                  document.getElementById('lblAgeMesg').innerHTML = 'Età di: ' + yearDiff + ' anni ' + monthDiff + ' mesi ' + dayDiff + ' giorni';
                                }
                                else{
                                  document.getElementById('lblAgeMesg').innerHTML = 'Età di: ' + yearDiff + ' anni ' + monthDiff + ' mesi ' + dayDiff + ' giorni';
                                }
                        }
                    }
                }
            }
            else {
                document.getElementById('lblAgeMesg').innerHTML = 'La data deve essere nel formato mm/gg/yyyy';
            }
            return false;
        }
    </script>
<table>
        <tbody>
<tr>
            <td><label>Digita la data di nascita: </label>
                <input id="txtDOB" type="text" /><label style="color: blue;">(mm/gg/yyyy)</label>
            </td>
        </tr>
<tr>
            <td><input id="btnAge" onclick="Calcola_eta();" type="button" value="Calcola l'età" />
            </td>
        </tr>
<tr>
            <td><label id="lblAgeMesg" style="color: blue;"></label>      
            </td>
        </tr>
</tbody></table>
</div>

Potrà essere personalizzato lo stile del bordo che ha lo spessore di un pixel, il colore delle scritte visualizzate (blue) operando sui codici dei colori e le stesse espressioni. Come detto la data deve essere nel formato mm/gg/yyyy e se l'input diverso viene mostrato il messaggio di errore colorato di viola.

Provate a inserire nel modulo precedente una data che potrebbe essere quella di nascita per poi cliccare su Calcola l'età per ottenere il risultato. Da notare che si possono inserire anche date del futuro e non solo del passato. In questo caso il risultato sarà preceduto dal segno meno e mostrerà quanti anni, mesi e giorni devono ancora trascorrere per arrivare alla data di quell'evento. Dovrà però essere tolto un anno.




7 commenti :

  1. Ciao!
    Complimenti per i tuoi tutorial semplici e chiari!
    Ho trovato molto utile il post su "Come mostrare la sidebar nei modelli a Visualizzazione Dinamica"..
    Il mio problema ora è un altro: mi piacerebbe tanto poter visualizzare il gadget degli "ultimi commenti" inseriti sul mio blog... Non è proprio possibile con la visualizzazione dinamica? Grazie mille :)

    RispondiElimina
  2. Ciao,
    davvero molto carina come idea, sei bravissima!
    Antonella

    RispondiElimina
  3. @Lisa
    Al momento non è possibile.
    @Antonella
    Grazie dei complimenti ma sono un maschio :-D
    @#

    RispondiElimina
    Risposte
    1. Scusa Ernesto,
      si lo so che sei un maschio, hihihih è che in questo periodo tante idee per la testa!
      Ti auguro una piacevole giornata.
      Antonella

      Elimina
  4. come sempre sei di aiuto.....ne approfitto per chiederti programmi per slideshow di foto da mettere nel blog

    RispondiElimina
    Risposte
    1. Programmi per slideshow? Non saprei comunque puoi leggere tutto quello che ho scritto in merito in questa raccolta di post
      http://www.ideepercomputeredinternet.com/search/label/slideshow
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.