1601 visualizzazioniUn calendario per il tuo form con jQuery UI DatePicker
Tempo di lettura: 3 min
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.
Indice dei contenuti
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>
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.
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.