Quando la pagina Web non dispone di spazio sufficiente per contenere un controllo calendario, fare un apparire come per magia utilizzando il controllo DatePicker jQuery UI. Visualizzare uno di questi calendari, ed i visitatori del sito possono scegliere le date con un clic. L'effetto è simile a quelli visti su siti che consentono di effettuare la prenotazione cliccando date su un calendario. È inoltre possibile formattare il JQuery UI DatePicker impostando la propria gamma minima date usando l'attributo MinDate.

istruzione

1 Aprire un documento HTML e incollare la seguente istruzione nella sezione head del documento HTML:

<Script type = "text / javascript" src = "& lt; / script" rel = "nofollow" target = "_blank"> https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min. js & quot;> & lt; / script>
<Script type = "text / javascript" src = "& lt; / script" rel = "nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js&quot;>&lt;/script>

La prima affermazione rende le funzionalità di base di jQuery disponibile nel codice. La seconda affermazione dà il vostro codice di accesso alla libreria jQuery UI che contiene il JQuery UI Datepicker.

2 Aggiungere la seguente casella di testo alla sezione corpo del documento:

<Input id = "text1" type = "text" />

3 Incollare il codice riportato di seguito nella sezione dello script del documento:

$ (Function () {
var MINYEAR = 2011;
var minMonth = 6;
var Minday = 22;
$ ( "# Testo1"). Datepicker (
{
MinDate: nuovo Data (MINYEAR, minMonth-1, Minday)

}
);
});

Questo esempio imposta la data minima come 6 giugno 2011 assegnando tale data per l'attributo MinDate come mostrato. Modificare questi valori come necessario per usare date diverse. La dichiarazione all'interno della funzione chiama il jQuery UI Datepicker utilizzando l'identificativo del tuo casella di testo come argomento.

4 Salvare il documento e aprirlo in un browser. Fare clic sulla casella di testo per visualizzare il calendario. Il calendario visualizza il mese corrente quando si apre. Fare clic su uno dei giorni e del calendario memorizza la data selezionata all'interno della casella di testo.

Consigli e avvertenze

• Due pulsanti - Precedente e Avanti - appaiono anche nella parte superiore del calendario. Cliccando li porta ai mesi successivi e precedenti.
• Facendo clic ovunque al di fuori del calendario senza selezionare una data si chiude automaticamente nel calendario.