Format date e format number con jquery

Andrea Zani, in Software, il 10 agosto 2010 alle 20:42

Il cosiddetto web 2.0, parolona per definire ciò che è possibile da anni e che fa tanto esperti, dovrebbe migliorare l'interattività di un sito web con il suo utilizzatore - ma ha ancora senso definirlo sito web o ormai si può definire a tutti gli effetti applicativi web? Quesito la cui risposta ha lo stesso senso della domanda per me: inutile.

L'interattività grazie a tecnologie come ajax permette la fruizione del contenuto di un sito web, nella volontà del progettista del sito, in modo migliore. Javascript fa la parte da leone e il vero e proprio avvento di jQuery ha aiutato la programmazione con questo linguaggio/tecnologia. E' innegabile: grazie a jQuery la scrittura del codice javascript è più agevole, una volta capita la sua base, e permette un'ottima compatibilità tra i vari browser e il sempre meno ultimo ritocco e test dovuti a funzionalità non compatibili tra i vari browser.

Nelle settimane scorse alla ricerca di un plug-in per jQuery che permettesse la trattazione di numeri e date nel modo più agevole e .net compatibile, mi è stato consigliato questo (link dove si può scaricare anche un esempio per capire le varie funzionalità).

Vediamo un semplice esempio sul suo utilizzo. Ecco il codice html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test number format</title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery.format-1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var d = new Date();
            var df = $.format.date(d, 'dd/MM/yyyy');
            $("#msg1").html(df);

            var borndate = "02-26-1974";
            var df2 = $.format.date(borndate, 'MM-dd-yyyy');
            $("#msg2").html(df2.toString());

            var value = 1234.56;
            $("#msg3").html($.format.number(value, '#,##0.00'));
            $("#msg4").html($.format.number(value, '#.##0,00'));
            $("#msg5").html($.format.number('1234.56'));

            $.format.locale({
                number: {
                    groupingSeparator: '.',
                    decimalSeparator: ','
                }
            });

            $("#msg6").html($.format.number(value, '#,##0.00'));
            $("#msg7").html($.format.number(value, '#.##0,00'));
        });
    </script>
</head>
<body>
<div>
    <h1>Date</h1>
    <div>
        <span>Visualizza data nel formato dd/MM/yyyy:</span>
        <span id="msg1"></span>
    </div>
    <div>
        <span>Converte stringa in data dal formato MM-dd-yyyy:</span>
        <span id="msg2"></span>
    </div>
    <h1>Number</h1>
    <div>
        <span>Visualizzo numero 1234.56 nel formato #,##0.00:</span>
        <span id="msg3"></span>
    </div>
    <div>
        <span>Visualizzo numero 1234.56 nel formato #.##0,00:</span>
        <span id="msg4"></span>
    </div>
    <div>
        <span>Converto stringa in numero (esempio 1234.56):</span>
        <span id="msg5"></span>
    </div>
    <div>
        <span>Visualizzo numero 1234.56 nel formato #,##0.00 (dopo aver modificato i separatori):</span>
        <span id="msg6"></span>
    </div>
    <div>
        <span>Visualizzo numero 1234.56 nel formato #.##0,00 (dopo aver modificato i separatori):</span>
        <span id="msg7"></span>
    </div>
</div>
</body>
</html>

In esso ho messo tutti gli esempi di base che possono capitare:

Da data a stringa nel formato voluto - per esempio dd/MM/yyyy.
Da stringa a data - per esempio, da MM-dd-yyyy
Numero a stringa nel formato voluto - per esempio #,##0.00.
Conversione da stringa a numero

L'output del codice qui sopra è il seguente:

Date
Visualizza data nel formato dd/MM/yyyy: 10/08/2010
Converte stringa in data dal formato MM-dd-yyyy: Tue Feb 26 1974 20:23:55 GMT+0100 (ora solare Europa occidentale)
Number
Visualizzo numero 1234.56 nel formato #,##0.00: 1,234.56
Visualizzo numero 1234.56 nel formato #.##0,00: 1234.5600
Converto stringa in numero (esempio 1234.56): 1234.56
Visualizzo numero 1234.56 nel formato #,##0.00 (dopo aver modificato i separatori): 1.234,56
Visualizzo numero 1234.56 nel formato #.##0,00 (dopo aver modificato i separatori): 1234,5600

Ok, ho detto tutto quello che volevo dire. anzi no, ma del resto chi vuoi che qualcuno se ne interessi? Ah giusto, è più importante l'esordio della nazionale di Prandelli con il Costa d'Avorio.

Commenti

Visualizza/aggiungi commenti