Inserire un calendario nel proprio sito grazie a jQuery
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...



Pubblicato il 9/7/2009 alle 09:20

timepicker jquery

In questo breve tutorial vedremo come inserire il widget di un calendario nel proprio sito web utilizzando un plugin jQuery.

Per prima cosa, scarichiamo il plugin dalla pagina ufficiale: dynDateTime: calendar date and time picker

Scompattiamo l’archivio ZIP nella cartella del nostro sito e includiamo i files del plugin e di jQuery:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.dynDateTime.js”></script>
<script type=”text/javascript” src=”lang/calendar-en.js”></script>
<link rel=”stylesheet” type=”text/css” media=”all” href=”css/calendar-blue.css”  />

Inseriamo nella pagina un DIV con ID univoco contenente un campo di testo e un button. Subito prima del div incolliamo il codice jQuery associandolo al div che in questo esempio ha id uguale a “timePicker“:

<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(”#timePicker input“).dynDateTime({
button: “.next()” //next sibling
});
});
</script>

Abbiamo finito :)

Ecco il widget in azione: timePicker

Nella cartella CSS ci sono diverse skin da utilizzare per il calendario, se non ci piacciono possiamo sempre realizzarcela da soli ;)

Google Buzz
Pubblicato in JavaScript, News, Programmazione, Risorse, Scripts, jQuery | 2 Commenti »

Condividi




Realizzazione siti web



Altri articoli che potrebbero interessarti

2 Responses to “Inserire un calendario nel proprio sito grazie a jQuery”

  1. marbio Says:
    Luglio 10th, 2009 at 10:01

    Molto interessante! Grazie per la dritta.

  2. EmaWebDesign Says:
    Luglio 10th, 2009 at 10:13

    Grazie a te per l’apprezzamento.

Leave a Reply