JavaScript: inserire un datepicker in un form

il logo di jquery,

Sul Web, tra le cose più noiose da realizzare (ma anche da usare), ci sono certamente i form, quelle pagine con tanti campi in fondo alle quali solitamente figura un tasto "invio", per intenderci.

Data la loro potenziale grande importanza, conviene che siano semplici e veloci da utilizzare . Per andare incontro all'utente nella selezione delle date, ad esempio, si adoperano i datepicker, ovvero dei riquadri popup che rappresentando un calendario, consentono di scegliere in maniera immediata la data necessaria.

Comodissima e facile da integrare oggi parleremo di una soluzione basata su JavaScript, o  meglio sulle librerie JQuery, che consente l'integrazione dello script nelle pagine, mediante del codice residente su un altro server.

Soluzione che apprezzeranno certamente i meno esperti.

Vediamo come funziona.

Anzitutto dobbiamo importare il codice e la libreria principale con il comando

successivamente richiameremo lo script in questa maniera.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

poi il foglio di stile:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

infine inseriamo un campo che abbia per id la dicitura "datepicker", come di seguito.

<input id="datepicker" value="choose date"/>

 

Cliccate su scegli data per  vedere lo script in azione.

 


email

Autore: GinoCQ

Web designer freelance.

Condividi su