Hvordan kombinere MinDate og Formater DatePicker

Hvordan kombinere MinDate og Formater DatePicker


Når websiden ikke har nok plass til å holde en kalender kontroll, lage en dukke som magi med jQuery UI DatePicker kontroll. Vise en av disse kalenderne, og besøkende kan velge datoer ved å klikke på dem. Effekten er lik dem sett på nettsteder som tillater deg å foreta reservasjoner ved å klikke på en kalender datoer. Du kan også formatere JQuery UI DatePicker ved å sette minimumsdatointervall bruker minDate attributtet.

Bruksanvisning

1 Åpne et HTML-dokument og lim følgende uttalelse i HTML-dokumentet hode seksjon:

<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>

Den første setningen gjør jQuery grunnleggende funksjonaliteten som er tilgjengelig i koden. Den andre setningen gir koden din tilgang til Jquery UI bibliotek som inneholder jQuery UI Datepicker.

2 Legg til følgende tekstboksen til dokumentets hoveddel:

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

3 Lim inn koden nedenfor inn i dokumentet manus seksjon:

$ (Funksjon () {
Var minYear = 2011;
Var minMonth = 6;
Var minDay = 22;
$ ( "# Tekst1"). Datepicker (
{
minDate: new Date (minYear, minMonth-en, minDay)

}
);
});

Dette eksemplet angir minimums dato som den 6 juni 2011 ved å tildele denne datoen til minDate attributt som vist. Endre disse verdiene som nødvendig å bruke forskjellige datoer. Uttalelsen inne funksjonen kaller jQuery UI Datepicker bruker tekstboksen ID som et argument.

4 Lagre dokumentet og åpne den i en nettleser. Klikk på tekstboksen for å vise kalenderen. Kalenderen viser gjeldende måned når det åpner. Klikk på en av dagene og kalenderen lagrer den valgte datoen i tekstboksen.

Hint

  • To knapper - Forrige og Neste - vises også øverst i kalenderen. Klikker dem tar deg til neste og forrige måned.
  • Klikke hvor som helst utenfor kalenderen uten å velge en dato stenger kalenderen automatisk.