Datepickers ajută utilizatorii să selecteze o dată printr-un calendar. Acest lucru evită erorile cauzate aproape întotdeauna de o intrare de dată proastă, cum ar fi o formatare proastă. Folosind plugin-ul jQuery puteți adăuga cu ușurință un datepicker la un câmp de intrare. Există multe pluginuri datepicker disponibile, dar jQuery UI Datepicker este unul dintre cele mai bune, deoarece are multe opțiuni de personalizare.
în acest tutorial, vă vom arăta cum să adăugați un datepicker la un câmp de intrare folosind jQuery. Cu acest datepicker, de fiecare dată când se face clic pe un anumit câmp de introducere, se va deschide un calendar. Utilizatorul va putea alege din acest calendar, o dată (zi, lună și an).
jQuery UI
În primul rând, trebuie să includem biblioteca jQuery UI pentru a-și folosi funcțiile.
funcționalitate Datepicker de bază
În acest exemplu, vă arăt cum să adăugați un datepicker la un câmp de intrare.
cod Javascript
trebuie să specificăm ID-ul câmpului de intrare ca selector datepicker.
$(function(){ $("#datepicker").datepicker();});
cod HTML
când vă concentrați pe câmpul de introducere, se va deschide un calendar interactiv.
<p>Date: <input type="text"></p>
funcționalitate avansată a Datepicker
în rândurile următoare vom vedea cum să facem o utilizare mai avansată a Datepicker prin opțiunile multiple pe care ni le oferă.
schimbați formatul datei
în mod implicit, pluginul folosește formatul ll / zz / aaaa. Folosind opțiunea DateFormat putem schimba formatul datei în funcție de nevoile noastre.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Selectați luna și anul
în mod implicit, schimbăm luna și anul cu săgețile stânga și dreapta. Cu opțiunile changeMonth și changeYear putem afișa un meniu cu care să selectăm luna și anul.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
restricționați un interval de date
cu Datepicker puteți selecta orice dată, dar dacă doriți să restricționați acest lucru, puteți utiliza opțiunile minDate și maxDate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker from to
în exemplul următor vă arăt cum să implementați un datepicker în care utilizatorul trebuie să introducă o dată de la și o dată la. Miezul acestui script este că data la, nu poate fi niciodată mai devreme decât data de la.
cod HTML
utilizatorul poate selecta orice dată din câmpul From, dar poate selecta doar una egală sau mai mare decât valoarea anterioară din câmpul To.
<p>Date: <input type="text"> TO <input type="text"></p>