Datepickers hjälper användare att välja ett datum genom en kalender. Detta undviker fel som nästan alltid orsakas av en dålig datuminmatning, till exempel en dålig formatering. Med hjälp av jQuery plugin kan du enkelt lägga till en datepicker till ett inmatningsfält. Det finns många datepicker-plugins tillgängliga, men jQuery UI Datepicker är en av de bästa eftersom den har många anpassningsalternativ.
i den här handledningen visar vi dig hur du lägger till en datepicker i ett inmatningsfält med jQuery. Med denna datepicker öppnas en kalender varje gång ett specifikt inmatningsfält klickas. Användaren kommer att kunna välja från denna kalender, ett datum (dag, månad och år).
Jquery UI
först och främst måste vi inkludera jQuery UI-biblioteket för att använda dess funktioner.
grundläggande Datepicker-funktionalitet
i det här exemplet visar jag hur du lägger till en datepicker i ett inmatningsfält.
Javascript-kod
Vi måste ange ID för inmatningsfältet som datumväljare.
$(function(){ $("#datepicker").datepicker();});
HTML-kod
När du fokuserar på inmatningsfältet öppnas en interaktiv kalender.
<p>Date: <input type="text"></p>
avancerad funktionalitet för Datepicker
i följande rader kommer vi att se hur man gör en mer avancerad användning av Datepicker genom de flera alternativ som den erbjuder oss.
ändra datumformat
som standard använder insticksprogrammet formatet MM / DD / ÅÅÅÅ. Med alternativet DateFormat kan vi ändra datumformat enligt våra behov.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Välj månad och år
som standard ändrar vi månad och år med vänster och höger pilarna. Med alternativen changeMonth och changeYear kan vi visa en meny för att välja månad och år.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
begränsa ett datumintervall
med Datepicker kan du välja vilket datum som helst, men om du vill begränsa detta kan du använda alternativen minDate och maxDate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker från till
i följande exempel visar jag dig hur du implementerar en datepicker där användaren måste ange ett datum från och ett datum till. Krummen i detta skript är att datumet till, kan aldrig vara tidigare än datumet från.
HTML-kod
användaren kan välja vilket datum som helst i fältet Från, men kan bara välja ett som är lika med eller större än föregående värde i fältet till.
<p>Date: <input type="text"> TO <input type="text"></p>