Un calendario con jquery!

Sono ormai diventato un jquery addicted e per ogni problema trovo una soluzione in questo fantastico framework javascript…

L’altro giorno sul lavoro dovevo realizzare una maschera di input con alcuni filtri su una ricerca… Uno di questi filtri era proprio una data di inizio e data di fine… Siccome la pagina (jsp) era rivolta ad impiegati di un ufficio(che non sempre sono good user) mi è stato chiesto di realizzare un calendario per permettere una scelta di date…

Ovviamente la prima cosa che ho fatto è stato googleggiare cercando “calendar jquery”… il primo risultato mi ha rimandato a questa pagina dove ho trovato in pochi e semplici passi alcuni file (un js e un css) da scaricare e da includere nel mio progetto(che comprendeva già jquery). E così che con 1 istruzione

$("#idtextbox").datepicker({"dd/mm/yy"});

ho risolto il mio problema..
Ecco a voi un semplice esempio (del tutto identico a quello che ho utilizzato io ;-):


[ad]

19 Risposte a “Un calendario con jquery!”

  1. Gene says:

    ..non mi pare che basti giusto scaricare un file css ed un file js.. lo sto usando anche io sto calendario.. ma non è proprio come la racconti tu. Scusami, ma non posso fare a meno di tacciare il tuo articolo come decisamente approssimativo .. a trovare il link con un googling sono buoni tutti… non c’è bisogno del tuo articolo per questo! Saluti!

  2. ferre says:

    @Gene
    Ah.. E quali sarebbero i passi complicati nel rendere funzionante questo plugin? Io ci ho davvero messo 1minuto, non di più…

  3. Gene says:

    ..passi complicati??? ..vedi che io ho solo detto che il tuo post è inutile e fuorviante (grossolano ed impreciso).. leggi meglio! La pagina era rimasta aperta ..non credo ci tornerò ..quindi puoi pure fare a meno di rispondere.. saluti!

  4. Gabriele says:

    mah… veramente rimanda tutto ad un articolo esterno… non credo cera per forza l’obbligo di spigare lo script nei minimi dettagli…

  5. Gabriele says:

    l’ho utilizzato e ci ho messo meno di 5 minuti… veramente semplice :P impegnati di più

  6. ferre says:

    @Gabriele
    Lo stesso tempo che ho impiegato io.. :) non mi sembra davvero nulla di complicato utilizzare questo datepicker e il mio articolo vuole solo portare a conoscenza, di quelli che ancora non lo sanno, che esiste questo rapido metodo per realizzare un calendario con jquery… Evidentemente bisogna conoscere le basi di jquery, ma anche qui non mi sembra nulla di così complicato.. boh?!

  7. […] di interfacce grafiche per l'utente, ad esempio per una scelta di date (ne avevo già parlato qui) o per creare dei blocchi trascinabili (drag&drop), barre di caricamento, pulsanti "slider" o […]

  8. Ciao,
    molto carino questo componente, grazie :)

    Una domanda: ma tu sei riuscito a formattare la data in dd/mm/yyyy ?
    Perchè nell’esempio in questa pagina vedo che mette sempre prima il mese e poi il giorno, ed io non sono riuscito a fargli cambiare questa impostazione. Ho guardato anche la funzione dateformat() sul sito di Datepicker ma niente, non mi funzia!
    Te hai risolto?

    Grazie, ciao!

  9. Ciao,
    funziona perfettamente :)

    Grazie infinite per l’aiuto!
    ciao!

  10. sKa says:

    Grazie. A me è servito.

  11. Costa says:

    Stavo cercando un calendario da fare con JQUery e sono finito qui… c.azzarola ferre ormai stai diventando famoso :)…

    P.S.: Utile comunque, l’ho inserito su SoccerSquare!

    • davide says:

      Eheheh uno dei miei primi articoli “famosi”.. Gli esperimenti sul SEO funzionano;)… E anche il calendario in jquery! :)

  12. Jo says:

    Ciao,
    ho trovato molto interessante il calendario da te proposto, ma a causa della mia pressochè totale inesperienza non sono riuscito a farlo funzionare. Questi i passaggi:
    tra ho caricato la libreria js 1.4
    tra ho inserito #idtextbox
    ho creato un campo input all’interno del div “idtextbox”, ma quando ci clicco dentro il calendatio non appare.
    Mi puoi aiutare a capire dove sbaglio.
    Grazie

  13. Jo says:

    oops, non mi ha riportato ciò che avevo scritto con le parentesi angolari. Volevo dire

    tra (head) …
    tra (script css)

    • davide says:

      Ciao grazie per i complimenti, i tag html non vengono recepiti dal sistema per evitare che qualcuno dalle cattive intenzioni inserisca codice “sporco” ;)
      Per il tuo problema invece, prima di tutto hai inserito la libreria jquery e quella di jquery-ui? i file js da includere nell’head sono due distinti.

  14. Jo says:

    in effetti ho inserito il file jquery.js e il file jquery.ui.core.js tra i tag head.

    ho dichiarato una classe con #idtextbox {background-color;#ffe;} tra i tag style type=”text/css”

    e all’interno del div (div id=”idtextbox”) ho inserito un campo input
    e la funzione $(“#idtextbox”).datepicker({“dd/mm/yy”});
    Sono sicuro di sbagliare qualcosa.
    Grazie comunque per la tua disponibilità
    Jo

  15. Massimiliano says:

    be devo dire che io lo fatto funzionare anche meno di 1 minuto, solo un problema come faccio a rimpicciolire il calendario perche mi compare un po grandicello.

Lascia un commento