Web e code script visite 26

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.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

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:

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

» 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

Le migliori icone Flat Design del 2015 per i tuoi siti internet

2 minIl flat design (design piatto), ispirato allo stile minimal, si sta diffondendo…

webdesign

Web e code script

Annullata la Web Tax, imposta sul commercio e la pubblicità

1 minTempo fa vi avevamo parlato della Web Tax, l’imposta sul commercio e…

webdesign

Web e code script

Animazione oggetti con jQuery e Css

1 min Animate.css è un gruppo di animazioni preconfezionate da Dan Eden, utile…