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

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.

Digita la data di nascita: (mm/gg/yyyy)

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.