Web e Code Script

Un calendario per il tuo form con jQuery UI DatePicker

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.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy