Web e code script visite 216

Un calendario per il tuo form con jQuery UI DatePicker

3 min

jQuery Datepicker

Molto spesso vi sarete imbattuti su siti web con form di prenotazione o richiesta preventivi. Possiamo trovarli su siti internet dove bisogna richiedere preventivi per le vacanze, quindi di hotel, b&b, voli, ma ormai si sono attrezzati anche i siti di ristoranti, per la prenotazione dei tavoli.
Questi son solo alcuni esempi, ormai son dappertutto.

Oggi vi presento un plugin jQuery che potrebbe essere molto utile a voi web designer. Si tratta di jQuery UI DatePicker, utilizzato per gli input text in cui bisogna inserire delle date. Uno strumento fantastico perchè donerà al vostro sito un tocco di professionalità e di estetica, che non guasta mai.

Come funziona

DatePicker sta per calendario, nome derivante dalla sua funzione. Nel momento in cui ci sarà un focus sull’input text data apparirà un piccolo calendario interattivo che permetterà di selezionare un giorno esatto sfogliando agevolmente tra i mesi dell’anno. Oltre a questo vantaggio permetterà al titolare del sito di ricevere una mail di richiesta formattata in maniera corretta.

Un esempio pratico

Vediamo come funziona il plugin jQuery UI DatePicker attraverso un esempio chiaro e conciso.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>
    <style>
	body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
	}
    </style>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>

Analisi del codice

Come avrete capito, abbiamo semplicemente richiamato i file della libreria jQuery più del codice css utile ad assegnare uno stile grafico accattivante al calendario (come da figura). Ecco i tre elementi fondamentali:

» jquery-ui.css : file di formattazione del calendario
» jquery.js : librerie base di JQuery 1.8.3 (versione attuale)
» jquery-ui.js : funzioni

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Secondo passaggio, anch’esso molto semplice, abbiamo assegnato all’input text l’id datepicker

<input type="text" id="datepicker" />

Infine abbiamo creato la funzione che permette il funzionamento, posizionandola nell’head

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

Calendario jQuery

Opzioni aggiuntive

Questo calendario è altamente personalizzabile come aspetto, attraverso i css, e poi come animazioni in ingresso e in uscita, attravero modifiche del codice. Ma non solo, è possibile fare apparire più mesi insieme o mostrare il calendarietto con il click su un’icona o ancora selezionare un intervallo di date, ossia il classico “da/a”.

Insomma un plugin davvero completo. Per ulteriori dettagli vi rimando alla documentazione completa.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

Ombra CSS3. Come aggiungerla a testo, div e immagini

2 minCSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli…

webdesign

Web e code script

FONT GAMES | Verifica le tue conoscenze

1 min KERNTYPE a kerning game L’obiettivo del gioco è semplice: realizzare un…

webdesign

Web e code script

Come fare un Redirect 301 di una pagina in automatico

1 minArgomento ostico per i poco pratici del mondo del web, il Redirect…