• hjem
  •  > 
  • Hjælpeprogrammer
  •  > 
  • Datepicker-kalenderen inkluderer begivenheder fra en bestemt kategori. jQuery-kalender (datePicker)

Datepicker-kalenderen inkluderer begivenheder fra en bestemt kategori. jQuery-kalender (datePicker)

Jeg stødte på en meget praktisk og funktionel jQuery-kalender!

Først og fremmest gjorde jeg det russisk, da det i originalen er engelsk og en smule ændret måden, kalenderikonet for at vælge en dato vises på. Den originale version kan findes.

Det forbinder, som altid, meget enkelt!

I linje 1, vores foretrukne jQuery, linje 2 - kalenderindstillinger, linje 3 - selve kalenderen og dens stil - linje 4.

Nu vil jeg se på flere opkaldsmetoder.

1. Almindelig kalender ved hjælp af jQuery

$(function() ( $("#inputDate1").datePicker(); ));

indtastningsfelt:

2. Kalender med et givet interval

Kalender med aktive datoer fra 01/01/2000 til 01/01/2012, kaldet ved at klikke på kalenderikonet.

$(function() ( $("#inputDate2").datePicker(( startdato: "01-01-2000", slutdato: "01-01-2012" )); ));

indtastningsfelt:

3. Ring ved at klikke på indtastningsfeltet

En almindelig kalender uden et kalenderikon, kaldet ved at klikke på indtastningsfeltet.

$(function() ( $("#inputDate3").datePicker((createButton:false, clickInput:true)); ));

indtastningsfelt:

4. Årskalender

Kalender med aktiv dato i et år fra i dag, kaldes ved at klikke på indtastningsfeltet.

$(function() ( $("#inputDate4").datePicker(( createButton:false, clickInput:true, endDate: (ny Date()).addDays(365).asString() )); ));

indtastningsfelt:

5. Kalender med aktive arbejdsdage

En kalender med aktive arbejdsdage (undtagen lørdag og søndag) med en dato et år fra i dag, kaldet ved at klikke på indtastningsfeltet og ved at klikke på kalenderikonet.

$(function() ( $("#inputDate5").datePicker(( clickInput:true, endDate: (new Date()).addDays(365).asString(), renderCallback:function($td, thisDate, month, år) ( if (thisDate.isWeekend()) ( $td.addClass("weekend"); $td.addClass("deaktiveret"); ) ) )); ));

indtastningsfelt:

6. Kalender med en "Luk"-knap

Kalender med en "Luk"-knap, kaldet ved at klikke på kalenderikonet. Når du har valgt en dato, lukker den ikke. Når du klikker på indtastningsfeltet, behandles "klik"-funktionen

$(function() ( $("#inputDate6").datePicker(( displayClose:true, closeOnSelect:false )).bind("klik", function() ( alert("klik virkede!"); )); ) );

indtastningsfelt:

7. Start 5 dage fra i dag

En kalender, hvis aktive dage begynder 5 dage fra dagens dato, kaldes ved at klikke på indtastningsfeltet. Efter at have valgt en dato, behandles "dateSelected"-funktionen, som kalder en besked med den valgte dato og tildeler den til det forrige felt. Efter lukning af kalenderen behandles "dpClosed"-funktionen

$(function() ( $("#inputDate7") .datePicker(( createButton:false, startDate: (new Date()).addDays(-5).asString(), clickInput:true )) .bind("dpClosed ", function(e, selectedDate) ( alert("dpClosed blev udløst"); )).bind("dateSelected", function(e, selectedDate, $td) ( alert("dateSelected blev udløst, " + selectedDate.asString( )); $("#inputDate7").val(selectedDate.asString()); $("#inputDate6").dpSetSelected(selectedDate.addDays(0).asString()); )); ));

indtastningsfelt:

8. Kalender i en DIV-beholder

Kalender i en DIV-beholder, når datoen ændres, behandler "dateSelected"-funktionen.

$(function() ( $("#inputDate8") .datePicker((inline:true)) .bind("dateSelected",function(e, selectedDate, $td) ( alert(selectedDate.asString()); )) ;));

DIV beholder:

Det er ikke svært at forbinde et script for hurtigt at sætte datoen i et felt, og der er masser af JS-scripts til dette på internettet. Og i denne artikel vil jeg poste den færdige kode til WordPress.

Opgaven er denne: vi har et indtastningsfelt, og vi skal sikre os, at når markøren placeres i dette felt, kommer der en kalender frem, hvor du kan vælge en dato (dag i måneden), og feltet udfyldes automatisk med valgt nummer i det ønskede format. Kalenderen skal være med russisk lokalisering. Denne opgave forekommer ofte, og jeg tænkte, at det ville være praktisk at have færdiglavet kode ved hånden.

    Hjemmeside for jQuery Datepicker plugin: https://jqueryui.com/datepicker/ - her finder du forskellige eksempler på brug af Datepicker;

  • Side til valg af CSS-temaer til jQuery UI - http://jqueryui.com/themeroller/ - her kan du vælge et færdiglavet jQuery UI-tema eller på fanen Roll Your Own - tilpas standardtemaet til dig selv: farver, baggrunde, afrunding af hjørner osv. .;
Klar Datepicker-kode til WordPress

Det er praktisk at forbinde jQuery Datepicker i WordPress, fordi det kommer sammen med WordPress, og for at forbinde det skal du kun indsætte to linjer: at forbinde selve scriptet og forbinde CSS-stile. Og så skal du bare køre funktionen js datepicker() på den ønskede.

Denne kode kan indsættes hvor som helst i php-filen, ikke nødvendigvis før get_header()-headeren udlæses, du kan direkte ind i HTML-dokumentets brødtekst - koden vil virke:

jQuery(document).ready(function($)( "brug streng"; // standardindstillinger. De kan føjes til den eksisterende js-fil // hvis datepickeren vil blive brugt gennem hele projektet, og du planlægger at køre den med forskellige indstillinger $.datepicker .setDefaults(( closeText: "Close", prevText: "", currentText: "Today", monthNames: ["januar","februar","marts","april","maj","juni ","Juli ","August","September","Oktober","November","December"], monthNamesShort: ["Jan","Feb","Mar","Apr","Maj", "Jun", "Jul","Aug","Sep","Okt","Nov","Dec"], dayNames: ["søndag","mandag","tirsdag","onsdag","torsdag" ","Fredag ​​","Lørdag"], dayNamesShort: ["søn","mandag","tirsdag","onsdag","torsdag","fredag","lør"], dayNamesMin: ["søn", "man", "tir","on","tor","fre","lør"], weekHeader: "Uge", dateFormat: "dd-mm-åå", førstedag: 1, showAnim: "slideDown" , isRTL: false , showMonthAfterYear: false, yearSuffiks: "" )); // Initialisering $("input, .datepicker").datepicker(( dateFormat: "dd/mm/yy" )); // du kan tilslutte en datepicker med ekstra. indstillinger som denne: /* $("input").datepicker((datoFormat: "åå-mm-dd", onSelect: function(dateText, inst)( // funktion for feltet, hvor sekunder også er angivet: 000-00 -00 00:00:00 - efterlader sekunder var secs = inst.lastVal.match(/^.*?\s((2):(2):(2))$/); secs = secs ? secs : " 00: 00:00"; // kun tt:mm:ss, lad timerne minutter og sekunder være som de er, hvis ikke vil det være 00:00:00 $(this).val(dateText +" "+ sek. ); ) )); */ ));

En lille analyse af koden:

Wp_enqueue_script("jquery-ui-datepicker");

Denne linje aktiverer alle de nødvendige scripts ved hjælp af wp_enqueue_script() , inklusive jQuery selv. Hvis jQuery allerede er forbundet, vil den ikke oprette forbindelse.

Wp_enqueue_style("jqueryui", "//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css", false, null);

Denne linje aktiverer css-stile ved hjælp af wp_enqueue_style() . jquery ui-stile er ikke inkluderet i WordPress-sættet, så vi forbinder dem separat (fra scriptbiblioteket fra Google). glathed i denne linje er navnet på jquery ui-temaet, og det kan for eksempel erstattes med redmond eller ui-lightness - en komplet liste over temaer (for at indsætte i en linje, i temanavnet skal du erstatte store bogstaver med små bogstaver og mellemrum med bindestreger).

// add_action("admin_footer", "init_datepicker", 99); // for admin panelet add_action("wp_footer", "init_datepicker", 99); // for den forreste del

Disse linjer forbinder funktionen init_datepicker() med sidefoden. Funktionen udsender et script, der kører datovælgeren for de angivne inputfelter. Hvilket felt der skal prøves datovælgeren på, bestemmes i linjen:

$("input, .datepicker").datepicker();

Denne linje vil køre en datovælger for alle inputfelter, hvis navneattribut har understrengen "dato", eller hvis inputfeltet har en datovælgerklasse. De der. Ethvert af disse felter vil matche denne kode.

Datepicker-widget

Denne artikel handler om Datepicker-widgetten - en praktisk interaktiv kalender, der gør det nemmere at indtaste datoer. At modtage kalenderoplysninger som tekst fra brugere er altid en udfordring, fordi der er mange forskellige formater til at udtrykke datoer. Datepicker-widgetten gør det nemt at vælge en dato og præsentere den på en ensartet måde, hvilket reducerer sandsynligheden for fejl.

Oprettelse af en Datepicker-widget

Der er to hovedmåder at oprette en Datepicker-widget på. Den mest almindelige måde at vedhæfte det til et input-element er at bruge metoden datepicker(). Dette ændrer ikke umiddelbart elementets udseende, men så snart elementet får inputfokus (ved at klikke på det eller navigere til det fra andre elementer ved hjælp af tasten), vil der blive vist en kalender ved siden af ​​det, som du kan bruge vælg den ønskede dato.

Kalendere af den beskrevne type kaldes pop-up kalendere. Et eksempel på oprettelse af en sådan kalender er givet nedenfor:

jQuery UI input (bredde: 200px; tekstjustering: venstre) $(function() ( $("#datep").datepicker(); )); Dato:

Billedet viser, hvad der sker, når du flytter fokus til et inputfelt:

Brugeren kan enten indtaste datoen manuelt eller vælge den ved hjælp af kalenderen. Når input-elementet mister fokus, eller brugeren trykker på (eller), forsvinder kalenderen.

Lokalisering af Datepicker-widgetten

Som du kan se, vises kalenderen i det viste eksempel på engelsk. jQuery UI Datepicker-widgetten giver ret omfattende understøttelse af de forskellige datoformateringsstandarder, der bruges rundt om i verden, inklusive 61 lokaliseringsmuligheder. For at få adgang til dem skal du importere et JavaScript-hjælpescript til dit dokument og fortælle Datepicker-widgetten, hvilken lokaliseringsmulighed der skal bruges. Et tilsvarende eksempel er givet nedenfor:

... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...

Filen jquery-ui-i18n.js er placeret i mappen Development-bundle/ui/i18n i jQuery UI-bibliotekets arkivfil, som du skulle have downloadet fra jqueryui.com. Kopier den til den samme mappe, hvor kildefilen er placeret, og føj den til dokumentet som vist i koden. Resultatet er vist i figuren:

Oprettelse af en indbygget Datepicker-kalender

Den anden måde at bruge Datepicker-widgetten på involverer at indlejre den i et dokument. For at gøre dette skal du vælge et div- eller span-element ved hjælp af jQuery og kalde metoden datepicker(). Den indbyggede kalender vises, så længe HTML-elementet, som den er baseret på, er synligt. Et eksempel på oprettelse af en indbygget kalender er givet nedenfor:

jQuery UI-etiket (margin-right:12px; ) input (width: 200px; text-align: left; margin-right: 10px) #wrapper > * (float: left) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"]); )); Dato:

Dette eksempel bruger et span-element som HTML-grundelementet til at oprette en Datepicker-widget. Resultatet er vist i figuren:

Den indbyggede kalender kan være nyttig, hvis du ikke ønsker at arbejde med pop op-objekter. Selvfølgelig er der applikationer, hvor arbejdet med datoer er så intensivt, at det giver mening altid at have en kalender ved hånden. Men i de fleste tilfælde giver det mening at lade kalenderen være skjult, indtil du har brug for den.

Vanskeligheden med at skjule og vise den indlejrede Datepicker-widget er, at tilføjelse af den til et dokument kræver ændring af sidelayoutet, hvilket kan forårsage præsentationsproblemer. Fra mit synspunkt er det i de fleste situationer meget mere bekvemt at bruge en pop-up-widget.

Opsætning af Datepicker-widgetten

Hvis du har beskæftiget dig med datobehandling før, så er du godt klar over, hvor svært det er at arbejde med denne kategori af data. En afspejling af denne kompleksitet er de mange forskellige egenskaber, der understøttes af Datepicker-widgetten. De følgende afsnit er viet til en beskrivelse af grupper af relaterede egenskaber, som denne widget er konfigureret med.

Grundlæggende indstillinger

Adskillige konfigurationsmuligheder bruges til at konfigurere de grundlæggende egenskaber for pop-up og indlejrede kalendere. Disse egenskaber er meget vigtige, fordi de giver dig mulighed for at kontrollere, hvordan widgetten integreres i dokumentet. Deres liste er angivet i tabellen nedenfor:

Grundlæggende egenskaber for Datepicker-widgetten Ejendomsbeskrivelse
altField Giver dig mulighed for at angive et ekstra felt, der opdateres, når du vælger en dato i kalenderen
knapBilledeKun Angiver, at det billede, der er angivet af knappenBillede-indstillingen, skal bruges i stedet for en sekundær knap til at åbne kalenderen.
knapBillede Definerer URL'en på billedet, der bruges til popup-kalenderen åben sekundær knap. Bruges ikke som standard
knapTekst Definerer den tekst, der vil blive vist på åben-knappen i pop op-kalenderen. Standardteksten er en ellipse (...)
standarddato Giver dig mulighed for at indstille den dato, der skal fremhæves, når du åbner kalenderen
handicappet Angiver, om widgetten i første omgang skal deaktiveres. Standardværdien er falsk
showOn Definerer den handling, der udløser åbningen af ​​pop op-kalenderen. Standardværdien er fokus
Angivelse af standarddatoen

Den enkleste indstilling er også den mest nyttige. Ved at bruge indstillingen defaultDate kan du angive en dato, der automatisk fremhæves, når du åbner kalenderen.

Hvis indstillingen defaultDate ikke er angivet, bruges den aktuelle dato i stedet. (Dette refererer selvfølgelig til den dato, der er indstillet på brugerens system. Tidszoner, sommertid eller fejlkonfigurationer kan alle medføre, at den dato, der vises for brugeren, ikke er den, du forventer. )

Denne mulighed bruges kun, hvis der ikke er nogen værdiattribut i input-elementet. Hvis denne attribut er til stede (uanset om den er inkluderet i dokumentet af dig eller er resultatet af et forvalg af brugeren), så vil Datepicker-widgetten bruge sin værdi.

Hvis du vil have kalenderen til at åbne med en anden startdato, kan du indstille den ved hjælp af en af ​​metoderne beskrevet i nedenstående tabel:

Mulige værdier for indstillingen standarddato Værdibeskrivelse
nul Nuværende dato er brugt
Dato objekt Bruger værdien repræsenteret som et JavaScript Date-objekt
+dage, -dage Bruger en dato, der adskiller sig fra den aktuelle dato med det angivne antal dage. Så +3 betyder en dato, der vil forekomme tre dage efter den nuværende, og -2 betyder en dato for to dage siden
+1d +7w -1m +1år Der bruges en dato, der måles fra den aktuelle dato og udtrykkes i antal dage (d), uger (w), måneder (m) og år (y), der bestemmer, hvor meget datoen flyttes frem (+) eller tilbage (-) i tid. Det er tilladt at blande positive og negative værdier på én dato. For eksempel svarer kombinationen af ​​værdier -1d +1m, brugt sammen med datoen 12. november 2011, til den 11. december 2011

Et eksempel på brug af indstillingen defauitDate til at angive en dato, der er fem år fra nu, er givet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));

Lad os antage, at den nuværende dato er december 2013. Så, som vist i figuren nedenfor, svarer datoen bestemt af værdien af ​​defauitDate-optionen til december 2018:

Du vil støde på det beskrevne format til at angive relative datoer mere end én gang. Dette er et meget fleksibelt format, der giver den nødvendige nøjagtighed. På samme måde som i eksemplet kan du udelade ethvert interval, som du ikke har tænkt dig at ændre. For eksempel, i stedet for værdien "+0d +0w +0m +5y" er det ganske muligt at bruge værdien "+5y". Det gode ved dette format er, at det giver dig mulighed for at blande positive og negative værdier for forskellige intervaller, hvilket giver dig mulighed for nøjagtigt at bestemme den ønskede dato.

Definere en begivenhed, der udløser åbningen af ​​en pop op-kalender

ShowOn-indstillingen giver dig mulighed for at styre den begivenhed, som pop-up-kalenderen skal vises på. Denne mulighed kan have en af ​​tre værdier:

fokus

Pop op-kalenderen åbner, når input-elementet får fokus. Dette er standardværdien.

knap

Pop-up-kalenderen åbnes ved at klikke på knappen.

begge

Popup-kalenderen vises både når der trykkes på knappen, og når input-elementet får fokus.

Hvis du bruger knappen eller begge værdier, opretter Datepicker-widgetten et knapelement og placerer det i dokumentet umiddelbart efter inputelementet. Et eksempel på brug af showOn-indstillingen er givet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "begge" )); ));

Som vist på figuren er der dukket en knap op i dokumentet. Fordi showOn-indstillingen er indstillet til begge i dette eksempel, vil popup-kalenderen blive vist både når der klikkes på knappen, og når input-elementet får fokus.

Knappen tilføjet af Datepicker-widgetten er ikke en jQuery UI Button-widget. Hvis du ønsker, at alle knapper skal være af samme type, skal du vælge et knapelement og kalde jQuery UI button() metoden.

Knapelementet kan styles ved at bruge knapBillede- og knaptekstindstillingerne. Hvis du indstiller buttonImage-indstillingen til et billedes URL, placerer Datepicker-widgetten det billede på knappen. Derudover kan standardteksten, der er knyttet til en knap (ellipsis) erstattes med anden tekst ved at bruge knappen Tekst, som vist i eksemplet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "begge", buttonText: "Vælg" )); ) );

Ved at bruge buttonImage og buttonImageOnly mulighederne sammen, kan du slippe af med knappen helt og erstatte den med et billede. Et tilsvarende eksempel er givet nedenfor:

jQuery UI-etiket (margin-right:12px) input (bredde: 200px; tekstjustering: venstre) #dpcontainer * (vertical-align: middle) #dpcontainer img (bredde: 35px;) $(function() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "begge", buttonImage: "right.png", buttonImageOnly: true )); )); Dato:

Dette eksempel indstiller billedet til right.png og indstiller buttonImageOnly-indstillingen til sand. Derudover er flere CSS-stile blevet tilføjet til dokumentet for at kontrollere placeringen af ​​billedet i forhold til etiketten og input-elementer. Datepicker-widgetten kan ikke finde ud af præcis, hvor img-elementet skal placeres, så CSS-stile skulle anvendes for at placere img-elementet korrekt i dokumentet. Resultatet af at bruge et billede i stedet for en knap er vist på figuren:

Datovalg kontrol

Formålet med en Datepicker-widget er at give brugeren mulighed for at vælge en dato, men i mange tilfælde skal der lægges nogle begrænsninger på denne proces. Tabellen nedenfor beskriver indstillinger, der giver dig mulighed for at indstille begrænsninger, der tvinger brugeren til kun at vælge gyldige datoer:

Datepicker-widgetegenskaber, der giver kontrol over datovalg Ejendomsbeskrivelse
skiftemåned Hvis denne mulighed er sand, viser kalenderen en rulleliste, der giver dig mulighed for at navigere direkte efter måned. Standardværdien er falsk
skifteår Hvis denne mulighed er sand, viser kalenderen en rulleliste, der giver dig mulighed for at navigere direkte efter år. Standardværdien er falsk
constrainInput Hvis denne indstilling er sand, kontrollerer Datepicker-widgetten, at indholdet af inputfeltet matcher det angivne datoformat. Standardværdien er sand
hideIfNoPrevNext Hvis denne mulighed er sand, så er ikonerne, der giver dig mulighed for at bevæge dig frem og tilbage på kalenderen i forhold til den viste dato, helt skjulte, snarere end blot deaktiveret. Standardværdien er falsk
maxDato Definerer den maksimale dato, der er tilgængelig for valg. Som standard er der ingen begrænsning
minDato Definerer den mindste dato, der er tilgængelig for valg. Som standard er der ingen begrænsning
antal måneder Bestemmer antallet af måneder, der vises samtidigt i kalenderen. Standardværdien er 1
showCurrentAtPos Hvis kalenderen er indstillet til at vise flere måneder på én gang, angiver denne indstilling det positionsnummer, hvor den aktuelle eller standardmåned skal vises. Standardværdien er 0
skridtmåneder Bestemmer, hvor mange måneder frem eller tilbage kalenderdatoen skal flyttes, når du klikker på frem- eller tilbagetidsknappen
årrække Definerer rækkevidden af ​​år, der er tilgængelige for valg på rullelisten, der tilføjes ved hjælp af indstillingen changeYear. Som standard inkluderer denne liste de foregående ti år, de næste ti år og det aktuelle år.
Begrænsninger for tegn og datointerval

Ved at indstille constrainInput-indstillingen til sand, kan du begrænse tegninput i et tekstfelt til kun de tegn, der er i overensstemmelse med et strengt defineret format. Det tilladte tegnsæt bestemmes af lokaliseringsindstillingerne beskrevet ovenfor. Hvis Datepicker-widgetten ikke er blevet lokaliseret, kan du forvente, at de tilladte tegn kun vil indeholde tal og skråstreg (/).

Brug af den angivne værdi for constrainInput-indstillingen betyder ikke, at brugeren ikke vil være i stand til at indtaste en ugyldig dato, såsom 99/99/99, men det reducerer markant sandsynligheden for fejl. Denne indstilling er endnu vigtigere, hvis showOn-indstillingen er sat til knappen, da popup-kalenderen ikke automatisk åbner, når inputfeltet får fokus.

Brugere er generelt villige til at bruge en kalender til at vælge en dato, men de skal se den for at gøre det. Hvis kalenderen ikke vises på skærmen, vil ikke alle brugere indse, at det er nok at klikke på en knap for at åbne kalenderen. Enhver mulighed, du giver brugeren til at indtaste en dato direkte i et tekstfelt, øger sandsynligheden for, at formatet på den dato, de indtaster, er forkert. Et eksempel på brug af constrainInput-indstillingen er givet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));

Her tildeles værdien sand til constrainInput-indstillingen kun for klarhedens skyld, da det er standardværdien for denne indstilling. De resterende to muligheder giver dig mulighed for at begrænse rækkevidden af ​​tilgængelige datoer til en minimums- og maksimumsdato.

Som med standardDate-indstillingen diskuteret tidligere, kan værdierne for minDate og maxDate-indstillingerne være null (en udefineret dato), et JavaScript Date-objekt, et antal dage og en relativ datostreng. I dette eksempel er den numeriske repræsentation valgt for at angive antallet af dage i forhold til den aktuelle dato.

På figuren kan du se, at Datepicker deaktiverer kalenderceller, der ikke kan vælges:

Bemærk venligst, at månedsknapperne automatisk deaktiveres, hvis de ikke er nødvendige. Disse knapper er placeret øverst til venstre og højre i kalenderen og giver dig mulighed for hurtigt at gå til næste eller forrige måned. Som vist på figuren er alle valgbare datoer i den aktuelle måned, og derfor er begge knapper deaktiveret. I sådanne situationer kan disse knapper skjules fuldstændigt, hvis det er nødvendigt ved at indstille hideIfNoPrevNext-indstillingen til sand.

MinDate-værdien behøver ikke at være i fortiden og maxDate-værdien i fremtiden, og den behøver heller ikke være begge værdier på samme tid. For at give brugeren mulighed for at vælge datoer fra et interval, der går forud for en "forberedende" periode, kan du indstille minDate-indstillingen til en værdi i fremtiden, og derved forhindre brugeren i at vælge datoer inden for denne periode, som vist i eksemplet nedenfor :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))

I dette eksempel specificerede vi, at brugeren ikke skulle kunne vælge datoer tidligere end 4 dage efter den aktuelle dato. Indstillingen maxDate er udefineret, hvilket betyder, at brugeren vil være i stand til at vælge en hvilken som helst dato efter den angivne "forsinkelsesperiode". Resultatet er vist i figuren:

Bemærk, at knappen næste måned er aktiveret i denne situation, mens knappen forrige måned er deaktiveret (på grund af manglen på tidligere datoer, som brugeren kan vælge).

Indstillingerne minDate og maxDate fungerer sammen med indstillingen defaultDate, hvilket betyder, at binding af intervaller til den aktuelle dato er valgfri.

Opret en kalender, der viser flere måneder på én gang

Datepicker-widgetten giver dig mulighed for at indstille antallet af måneder, der skal vises samtidigt i kalenderen ved at bruge muligheden numberOfMonths. Dette kan gøres ved at angive enten det nødvendige antal måneder eller en række af to elementer, der definerer dimensionerne af det månedlige kalendergitter.

Eksemplet nedenfor implementerer en array-baseret tilgang, som jeg finder bedst egnet til indbyggede Datepicker-widgets, da gitterstørrelsen ofte er for stor til popup-widgets (vi kommer tilbage til dette senere).

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((antalOfMonths: )); ));

Dette eksempel angiver et kalendergitter, der er en måned højt og tre måneder bredt. Resultatet er vist i figuren:

En matrix af to elementer svarer til den numeriske værdi 3. Hvis værdien af ​​optionen numberOfMonths er angivet som et tal, viser widgetten det tilsvarende antal måneder i én række.

Grunden til, at jeg sjældent bruger denne tilgang, når jeg arbejder med pop-up-kalendere, er, at du med store gitter skal gøre visse antagelser om browservindue og skærmstørrelser. Datepicker popup-widgetvinduet er ikke en operativsystemdialogboks. Det er et smart stylet HTML-element, der vises som en del af et HTML-dokument. Det betyder, at når store kalendergitter vises på en lille skærm eller i et lille browservindue, vil meget af resten af ​​informationen i dokumentet blive vist uden for skærmen.

Giver direkte adgang til måneder og år

I stedet for blot at vise måneder og år i kalenderoverskriften, kan du give direkte adgang til de relevante tidsperioder ved hjælp af rullelister. Denne funktion giver hastighed, når brugere skal vælge datoer fra en bred vifte af mulige datoer, og implementeres ved hjælp af mulighederne changeMonth og changeYear.

Hvis du indstiller en af ​​disse muligheder til sand, aktiveres den tilsvarende rulleliste, og du kan uafhængigt kontrollere, om listerne er aktiveret. Et eksempel på brug af disse muligheder er givet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( changeMonth: true, changeYear: true, yearRange: "-1:+ 2" )); ));

I dette scenarie er begge rullelister aktiveret. Derudover bruges yearRange-indstillingen til at begrænse rækken af ​​år, som brugeren må skifte mellem. Det påkrævede område er angivet ved hjælp af værdien "-1:+2", hvilket betyder, at kalenderen giver brugeren mulighed for at flytte et år tilbage og to år frem fra det aktuelle år.

Rullelisterne og det angivne årstal er vist i figuren:

Når du definerer årsintervaller, kan du bruge indstillingen yearRange til at angive faktiske år. Så i dette eksempel kan du angive værdien: "2012:2015".

Styring af udseendet af Datepicker-widgetten

Der er en række egenskaber, der giver dig mulighed for at tilpasse udseendet af Datepicker-widgetten, når den vises for brugeren. Til almindelige datoudvælgelsesopgaver kan du nøjes med standardkalenderudseendet, som du allerede er bekendt med fra de tidligere eksempler, men muligheden for at tilpasse udseendet, så det passer til behovene i din specifikke webapplikation, er yderst nyttig.

De egenskaber, der giver dig mulighed for at ændre udseendet af Datepicker-widgetten, er vist i tabellen nedenfor:

Egenskaber, der giver dig mulighed for at kontrollere udseendet af Datepicker-widgetten Ejendomsbeskrivelse
tilføj tekst Angiver værktøjstip-tekst, der indeholder yderligere information, såsom en forklaring af datoformatering, der vil blive indsat i dokumentet efter input-elementet
lukTekst Indstiller teksten for luk kalenderknappen, der vises på hjælpeknaplinjen, når den er aktiveret. Standardværdien er "Luk"
aktuelle tekst Indstiller teksten for knappen tilbage til den aktuelle måned, der vises på hjælpeknaplinjen, når den er aktiveret. Standardværdien er "I dag"
varighed Indstiller hastigheden eller varigheden af ​​animationen angivet af showAnim-indstillingen. Standardværdien er normal
gotoCurrent Hvis denne indstilling er sand, vil knappen I dag, der findes i hjælpeknaplinjen, hvis den er aktiveret, vende tilbage til den valgte dato i stedet for den aktuelle dato. Standardværdien er falsk
vælgOtherMonths Hvis denne indstilling er sand, bliver de datoer, der vises som et resultat af indstilling af indstillingen showOtherMonths til sand, tilgængelige for valg.
showAnim Bestemmer den type animation, der bruges til at vise og skjule pop op-kalendere. Standardværdien er falsk
vis ButtonPanel Hvis denne mulighed er sand, vil kalenderen vise et hjælpepanel med knapper, der giver brugeren mulighed for at navigere til den aktuelle dato og (hvis der bruges en pop-up-widget) lukke kalenderen. Standardværdien er falsk
vis Indstillinger Indstiller de animationsindstillinger, der er angivet af indstillingen showAnim
visAndre Måneder Hvis denne mulighed er sand, vil tomme felter i kalendergitteret blive udfyldt med datoer fra tidligere og efterfølgende måneder. Standardværdien er falsk
showWeek Hvis denne mulighed er sand, vil kalenderen vise en kolonne med ugenumre. Standardværdien er falsk
ugeHeader Indstiller titlen på kalenderkolonnen med ugenumre aktiveret af indstillingen showWeek. Standardværdien er "ons"
Ugevisning

I nogle applikationer er det vigtigt at kende nummeret på ugen i det år, hvor en bestemt dato falder. Det kræves for eksempel i mange regnskabsprogrammer. I Datepicker-widgetten styrer du visningen af ​​ugeinformation ved hjælp af mulighederne showWeek og weekHeader, som vist i eksemplet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, weekHeader: "Uge No." )); ) );

Hvis indstillingen showWeek er sand, vises en kolonne med ugenumre i kalenderen. Standardoverskriften for denne kolonne er "Uge", men den kan ændres ved at bruge indstillingen weekHeader. Eksemplet viser kolonnen uger, som er omdøbt til "Uge #":

Udfyldning af tomme kalenderceller med datoer fra tilstødende måneder

Som standard viser kalenderen kun datoer, der falder inden for den aktuelle måned. Det betyder, at der kan være tomme celler i kalendergitteret. Du kan tillade, at tomme celler udfyldes med datoer fra de foregående og efterfølgende måneder ved at indstille indstillingen showOtherMonths til sand, som vist i eksemplet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((showOtherMonths: true )); ));

Resultatet er vist i nedenstående figur. I dette tilfælde bliver datoer, der tilhører andre måneder, tilgængelige, hvis indstillingen selectOtherMonths er indstillet til sand:

Brug af hjælpepanelet til yderligere knapper

Indstilling af showButtonBar-indstillingen til sand bevirker, at der tilføjes en bjælke med yderligere knapper i bunden af ​​Datepicker-widgetvinduet. I tilfælde af en pop-up kalender indeholder panelet to knapper: "I dag" og "Luk". Knappen I dag giver dig mulighed for at vende tilbage til den aktuelle dato, og knappen Luk lukker kalendervinduet. Den tekst, der bruges til disse knapper, kan ændres ved at bruge indstillingerne AktuelTekst og LukTekst.

Hvis indstillingen goToCurrent er sat til sand, vil kalenderen vende tilbage til den valgte dato i stedet for den aktuelle dato. Denne funktion er nyttig, hvis Datepicker-widgetten er konfigureret med en specifik standardværdi for Date-indstilling. Hvis formålet med at vælge en dato er relateret til tidligere eller fremtidige begivenheder, så er det ikke altid passende at vende tilbage til den nuværende dato. Et tilsvarende eksempel er givet nedenfor:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate : "+1m +1y" )).val("12/20/2014"); ));

Bemærk, at brug af goToCurrent-indstillingen får knappen til at blive trykket for at springe til den valgte dato. I dette eksempel er den valgte dato værdiattributten for input-elementet, men hvis brugeren vælger en anden dato og derefter genåbner kalenderen, vil et klik på knappen returnere kalenderen til den dato, brugeren valgte i stedet for den dato, du har angivet.

Datepicker-widgetmetoder

De metoder, der understøttes af Datepicker-widgetten, er angivet i tabellen nedenfor:

Datepicker-widgetmetoder Metodebeskrivelse
datepicker("ødelæg") Fjerner fuldstændig Datepicker-widget-funktionalitet fra basiselementet
datepicker("deaktiver") Sætter Datepicker-widgetten på pause for det underliggende element
datepicker("aktiver") Genoptager en tidligere suspenderet Datepicker-widget for det underliggende element
datepicker("option", muligheder) Giver dig mulighed for at få eller indstille værdierne for en eller flere Datepicker-widgetindstillinger
datepicker("er Disabled") Returnerer sand, hvis Datepicker-widgetten er deaktiveret
datepicker("skjul") Skjuler pop op-kalenderen, hvis den er synlig
datepicker("vis") Viser en pop op-kalender, hvis den er usynlig
datepicker("opdater") Opdaterer kalenderen, så den afspejler ændringer foretaget i det underliggende element
datepicker("getDate") Får datoen valgt i kalenderen
datepicker("setDate", dato) Indstiller den angivne værdi som den valgte kalenderdato
Hentning og ændring af datoen programmatisk

De mest almindelige gange, jeg bruger metoderne getDate og setDate, er, når jeg vil give brugerne mulighed for at vælge hele datointervaller ved hjælp af flere Datepicker-widgets. I sådanne situationer foretrækker jeg ikke at vise de valgte datoer i tekstfelterne og kun vise antallet af dage mellem de angivne skæringsdatoer. Et tilsvarende eksempel er givet nedenfor:

jQuery UI-etiket (margin:12px) input (bredde: 200px; tekstjustering: venstre) #wrapper > * (float: venstre) #result (margin: auto; polstring: 10px; bredde: 200px; clear: left) $( function() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d", maxDate: "+7d", onSelect: function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date) . datepicker("enable").datepicker("option", "minDate", date) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); $("#dayCount").text( diff).parent().show(); ) ) )).filter("#dateEnd").datepicker("disable"); )); Start: Slut: Antal dage:

Dette eksempel opretter to kalendere, hvoraf den ene er i en deaktiveret tilstand umiddelbart efter, at dokumentet er indlæst. For at svare på brugerens valg af datoer, bruges onSelect-begivenheden (som vi vil tale mere detaljeret om senere).

Når brugeren har valgt en dato i den første kalender, bruger vi setDate-metoden til at forberede den anden kalender og getDate-metoden til at hente datoer fra begge kalendere og derefter beregne forskellen i dage mellem den første og anden dato (for nemheds skyld antage, at begge datoer er fra samme og samme måned). Dokumentvisningen i browservinduet er vist i figuren:

Datepicker-widget-begivenheder

Som alle jQuery UI-widgets understøtter Datepicker-widgetten et sæt hændelser, der giver dig mulighed for at blive underrettet om vigtige ændringer i applikationstilstand. Disse begivenheder er vist i tabellen nedenfor:

Jeg vil ikke demonstrere igen, hvordan onSelect-metoden virker, fordi den allerede er blevet brugt i et par eksempler, inklusive det, der blev diskuteret i det foregående afsnit. Det eneste, jeg vil påpege, er, at de argumenter, der sendes til hændelseshandleren, er strengrepræsentationer af den valgte dato og Datepicker-forekomsten, der rejste hændelsen.

OnChangeMonth-hændelsen giver dig mulighed for at reagere på den hændelse, der opstår, når brugeren vælger en anden måned eller et andet år, uanset om det er via rullelister aktiveret ved brug af indstillingerne changeMonth og changeYear eller månedssideknapperne.

Ved at bruge onClose-metoden kan du reagere på lukningen af ​​en popup-kalender. Denne begivenhed udløses, selvom brugeren ikke har valgt en dato i kalenderen. Hændelseshandlerens argumenter er en strengrepræsentation af datoen (eller en tom streng, hvis brugeren lukkede vinduet uden at foretage et valg) og Datepicker-forekomsten, der rejste hændelsen.

Lad mig tage et forbehold med det samme, at serien af ​​disse artikler ikke er beregnet til garvede fagfolk, det er blot et skub i udviklingen, en slags lille udflugt til mulighederne for begyndere, for dem, der ikke aner noget om UI og jQuery i generel.
Lad os gå!

Download: http://jqueryui.com/download
Vi forbinder den shamanske ramme, lokalisering af kalenderen og stilarket:

Så forberedelserne er færdige.

For at oprette en kalender skal du kun bruge én linje html:

Eller hvis du vil integrere en kalender på webstedet som et sideelement:

Og et par js-linjer:

$(function())( $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(); ));

Og så fik vi en fuldstændig fungerende kalender på russisk, men hvad nu hvis vi laver en hjemmeside på engelsk eller ukrainsk? For at ændre situationen til vores fordel skal vi blot ændre én parameter, og dette kan gøres dynamisk:

$("#datepicker").datepicker("option", $.datepicker.regional["dk"]));

Standard "standard" funktionalitet er ikke altid nok til at udføre visse opgaver. Så lad os redigere indstillingerne lidt:

$("#datepicker").datepicker(( minDate: "-30", //Minimumsdato, der kan vælges, dvs. -30 dage fra "nu" maxDate: "+1m +1w +3d" //Maksimum en dato der kan vælges, dvs. + 1 måned, 1 uge og 3 dage fra "nu" ));

hændelser $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(( beforeShow: function(input) ( $(input).css("background-color","#ff9"); ), onSelect: function(dateText, inst) ( $( this).css("baggrundsfarve",""); alert("Selected: " + dateText + "nnid: " + inst.id + "nselectedDay: " + inst.selectedDay + "nselectedMonth: " + inst.selectedMonth + "nselectedYear: " + inst.selectedYear); ), onClose: function(dateText, inst) ( $(this).css("baggrundsfarve",""); ) ));

I listen ovenfor har vi tre muligheder, der indeholder tilbagekald.
beforeShow er den funktion, der vil blive kaldt, før kalenderen vises.
Ved at bruge css-indstillinger vil det sætte input til en gul baggrund.
OnSelect definerer en funktion, der vil blive kaldt, når en dato er valgt; den vil vise den valgte dato i en advarsel og sende en tom css-indstillingsværdi, som vil returnere input til dens tidligere form.
onClose er en funktion, der vil fungere, når kalenderen er lukket - det vil sige, at den returnerer en hvid baggrund til inputtet.

metoder Åbn i vinduet$.datepicker.setDefaults((ændringsÅr: sand), $.extend($.datepicker.regional["ru"])); $("#datepicker_open").click(function())( $("#datepicker").datepicker("dialog", "04/23/2009", function())( alert("onSelect event"); ), (showButtonPanel : sand )); )); I eksemplet nedenfor demonstrerer jeg, hvordan dialogmetoden fungerer. Vi kalder denne metode, når der klikkes på et link. Det første argument er navnet på metoden, det andet argument textDate er den dato, hvor kalenderen åbnes som standard. I onSelect-argumentet kan du sende en tilbagekaldsfunktion, der vil blive kaldt, når en bestemt dato er valgt i kalenderen. I indstillingsargumentet kan du sende et objekt med nye widgetindstillinger, der vil blive anvendt på den kalender, der åbnes i dialogboksen.
  • altField er en jQuery-vælger for et andet felt, der skal opdateres, så snart en dato er valgt i Datepicker. Datoformatet i dette ekstra felt indstilles ved hjælp af alternativet altFormat.
  • altFormat - datoformat, der vil blive brugt til altField-indstillingen. Disse indstillinger tillader, at et datoformat vises til brugeren, mens et andet format kan bruges til beregninger. En komplet liste over mulige formater kan findes på http://api.jqueryui.com/datepicker/
  • appendText - Den tekst, der vil blive vist efter hvert datovælgerfelt. Kan f.eks. bruges til at markere et felt efter behov.
  • buttonImage — adressen på billedet, der vil blive vist på knappen, der kan bruges til at kalde kalenderen. Bruges i forbindelse med showOn-indstillingen, når den tager værdien 'knap' eller 'begge'. Hvis tekst blev angivet i knappen Text-indstillingen, bliver det værdien af ​​billedets alt-attribut.
  • buttonImageOnly - hvis du indstiller denne indstilling til sand, vil billedet, hvis adresse er defineret i buttonImage-indstillingen, ikke blive vist på knappen, men af ​​sig selv.
  • knapTekst - tekst vist på knappen, der kan bruges til at åbne kalenderen. Bruges i forbindelse med showOn-indstillingen, når den tager værdien 'knap' eller 'begge'.
  • changeMonth - hvis du passerer værdien sand i denne mulighed, vil det være muligt at vælge måneden fra rullelisten.
  • changeYear - hvis du passerer værdien sand i denne mulighed, vil det være muligt at vælge årstal fra rullelisten.
  • closeText - Denne mulighed bruges sammen med showButtonPanel, hvis sidstnævnte er sandt. Værdien af ​​closeText-indstillingen er defineret i lokaliseringsfilen, hvis en sådan bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • constrainInput - som standard er indstillingen sand og tvinger det datoformat, der er defineret i widget-indstillingerne, til at blive nøje overholdt i tekstindtastningsfeltet. For ikke at kunne følge dette format, skal du indstille indstillingen til falsk.
  • currentText - Denne mulighed bruges sammen med showButtonPanel, hvis sidstnævnte er sandt. Værdien af ​​indstillingen currentText er defineret i lokaliseringsfilen, hvis en sådan bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • dateFormat - definerer datoformatet. Værdien af ​​indstillingen dateFormat er defineret i lokaliseringsfilen, hvis en sådan bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit. En komplet liste over mulige formater kan findes på
    http://docs.jquery.com/UI/Datepicker/formatDate
  • dayNames er en matrix, der indeholder de fulde navne på ugedagene, startende med søndag. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • dayNamesMin er et array, der indeholder 2-bogstavsforkortelsen af ​​navnene på ugedagene, startende med søndag. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • dayNamesShort - et array, der indeholder 3-bogstavsforkortelsen af ​​navnene på ugedagene, startende med søndag. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • defaultDate - Indstiller den dato, der vil blive fremhævet, når den åbnes første gang, hvis datovælgerfeltet er tomt. Indstillingen kan specificeres gennem et Dato-objekt, enten som et antal dage fra det aktuelle for (f.eks. +7 eller -15), eller som en række af værdier, der angiver perioden ('y' for år, 'm ' for måneder, 'w' for uger, 'd' for dage, for eksempel '+1m +7d'), og til sidst som null for den aktuelle dag.
  • varighed — varigheden af ​​animationseffekten, når du åbner (lukker) kalenderen. Kan tage værdier som en streng - 'hurtig', 'normal' (standard), 'langsom' eller som et tal i millisekunder. Hvis du passerer en tom streng, åbnes og lukkes kalenderen uden nogen animationseffekt.
  • firstDay - indstillingen indstiller den første dag i ugen: søndag - 0, mandag - 1,... Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved eksplicit at angive den.
  • gotoCurrent - hvis du indstiller indstillingsværdien til sand, vil knappen Today (tilgængelig, når showButtonPanel: sand) pege på den valgte dato i stedet for den nuværende.
  • hideIfNoPrevNext - hvis du begrænser intervallet af tilgængelige datoer ved hjælp af minDate og maxDate mulighederne, når du når slutningen af ​​intervallet, bliver tilbage- og frem-pilene inaktive. Men du kan skjule dem fuldstændigt ved at overføre værdien sand til hideIfNoPrevNext-indstillingen.
  • isRTL - Denne indstilling skal sættes til sand, hvis der bruges et højre-til-venstre-sprog. Defineret i lokaliseringsfilen, hvis den bruges.
  • maxDate - indstiller den maksimale valgbare dato gennem Dato-objektet enten som antallet af dage fra den aktuelle (for eksempel +7) eller som en række af værdier, der definerer perioden ('y' for år, 'm' for måneder , 'w' for uger, 'd' for dage, f.eks. '+1y +1m'), eller null for ingen grænse.
  • minDate - indstiller den mindste valgbare dato gennem Date-objektet enten som antallet af dage fra den aktuelle (for eksempel -7) eller som en række af værdier, der definerer perioden ('y' for år, 'm' for måneder , 'w' for uger, 'd' for dage, for eksempel '-1y -1m'), eller null for ingen grænse.
  • monthNames er en matrix, der indeholder de fulde navne på månederne. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • monthNamesShort - et array, der indeholder en 3-bogstavs forkortelse for månedens navn. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit.
  • navigationAsDateFormat - som standard er indstillingen falsk. Hvis den er sat til sand, vil dateFormat-funktionen blive anvendt på værdierne for næsteTekst, forrige tekst og nuværende tekst for at vise, for eksempel, forrige og næste måneds navne under navigation.
  • nextText er den tekst, der vises som et link til den næste måned. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit. Hvis ThemeRollers stilfil bruges, erstattes denne værdi af ikonet.
  • numberOfMonths - denne mulighed bestemmer, hvor mange måneder der skal vises på én gang. Indstillingsværdien kan være et simpelt tal eller en matrix af to elementer, der definerer antallet af henholdsvis rækker og kolonner. For eksempel vil værdien vise en kalender i to rækker af tre måneder.
  • prevText - tekst, der vises som et link til den foregående måned. Defineret i lokaliseringsfilen, hvis den bruges, men denne værdi kan tilsidesættes ved at angive den eksplicit. Hvis ThemeRollers stilfil bruges, erstattes denne værdi af ikonet.
  • shortYearCutoff - standardværdi +10. Denne mulighed bruges kun, hvis datoFormatet bruger en tocifret årstalsnotation og fungerer som en kompensator for at bestemme århundredet. Hvis værdien videregives som et tal, bruges den som den er. Hvis værdien videregives som en streng, konverteres den til et tal og lægges til den aktuelle årsværdi. Når værdien er bestemt, anses alle data, der fungerer som årsværdien, både mindre og lig med den, for at være år af det nuværende århundrede. Store værdier anses for at være år fra det forrige århundrede.
  • showAnim - bestemmer typen af ​​animation, når du åbner kalenderen. Standardværdien er show (skjul vil blive brugt ved lukning). Uden tilslutning af yderligere filer kan effekterne 'slideDown' og 'fadeIn' bruges (ved lukning vil effekterne 'slideUp' og 'fadeOut' blive brugt, hhv.). Det er også muligt at bruge alle jQuery UI-effekter, forudsat at de er yderligere forbundet.
  • showButtonPanel - Indstilling af denne indstilling til sand vil få et panel til at blive vist med to knapper - gå til dagens dato og luk kalender.
  • showCurrentAsPos - når der vises flere måneder på én gang, bestemmer antallet af passerede i denne indstilling positionen for den aktuelle måned. Standardværdien er 0, og den aktuelle måned vises i øverste venstre hjørne.
  • showMonthAfterYear - standardværdien er falsk, og månedens navn kommer før året i overskriften. Når den er indstillet til sand, vil månedsnavnet følge året.
  • showOn - Denne indstilling er som standard 'fokus', hvilket får kalenderen til at åbne, når der klikkes på inputfeltet. Andre mulige værdier er 'knap' og 'begge'. Der vises en knap ved siden af ​​indtastningsfeltet. I det første tilfælde åbnes kalenderen, når der trykkes på knappen, og i det andet tilfælde, både når der trykkes på knappen, og når indtastningsfeltet får fokus.
  • showOptions - Hvis du bruger en af ​​jQuery UI-effekterne, kan du overføre yderligere indstillinger til den ved at bruge denne mulighed. For eksempel: showOptions: (retning: 'op').
  • showOtherMonths - er som standard falsk. Hvis det er sandt, vil kalenderen vise dagene i den foregående og/eller næste måned uden mulighed for at vælge dem.
  • stepMonths - bestemmer, hvor mange måneder kalenderen skal flyttes, når du klikker på Next og Previous links. Standard er 1.
  • yearRange - styrer intervallet af år, der vises i rullelisten (når du bruger indstillingen changeYear).
  • beforeShow - her kan du definere en funktion, der skal kaldes, inden du åbner kalenderen. Funktionen tager som argument et objekt, der karakteriserer tekstindtastningsfeltet, som widgetten arbejder med.
  • beforeShowDay - i denne mulighed kan du definere en brugerdefineret funktion, der vil tage den valgte dato som et argument. Funktionen skal returnere et array, hvor elementet med indeks - sand eller falsk angiver, om valget af denne dato er muligt eller ej. Indekselementet indeholder navnet på klassen/klasserne for at vise datoen. Element med indeks (valgfrit) – værktøjstip tekst for datoen. Funktionen vil blive kaldt for hver dato i kalenderen, når musen holdes over.
  • onChangeMonthYear - her kan du definere en funktion, der skal kaldes, når måneden eller året i kalenderen ændres. Funktionen tager tre argumenter. De første to argumenter er værdierne for nyt år og måned, det tredje argument er et datepicker-objekt.
  • onClose - Denne indstilling definerer en funktion, der vil blive kaldt, når kalenderen er blevet lukket uden at vælge nogen dato.
  • onSelect - denne indstilling definerer en funktion, der vil blive kaldt, når en dato er valgt i kalenderen.
  • destroy - .datepicker('destroy') fjerner fuldstændigt al funktionalitet i Datepicker-widgetten. Returnerer elementer til deres tilstand før initialisering.
  • disable — .datepicker(‘disable’) deaktiverer midlertidigt al widget-funktionalitet. Du kan genaktivere dens brug ved at bruge aktiveringsmetoden.
  • enable - .datepicker('enable') tillader brugen af ​​al widget-funktionalitet, hvis den tidligere var deaktiveret ved hjælp af deaktiveringsmetoden.
  • option - .datepicker('option', optionName, ) ved hjælp af denne metode kan du få eller indstille værdien af ​​enhver widget-indstilling efter initialisering.
  • dialog - .datepicker('dialog', dateText, , , ) åbner Datepicker-widgetten i dialogtilstand. DateText-argumentet passerer den dato, hvor kalenderen skal åbnes. De resterende argumenter er valgfrie. I onSelect-argumentet kan du sende en funktion, der vil blive kaldt, når du vælger en dato i kalenderen, i indstillingsargumentet kan du sende et objekt med nye widget-indstillinger, i pos-argumentet kan du videregive koordinaterne, hvori dialogboksen vil blive åbnet. Her kan du bruge musehændelser til at bestemme koordinaterne.
  • isDisabled - .datepicker('isDisabled')-metoden returnerer sand, hvis deaktiveringsmetoden blev anvendt på widgetten og false ellers.
  • hide - .datepicker('skjul', ) skjuler den tidligere åbnede kalender.
  • show - .datepicker('show') åbner kalenderen.
  • getDate - .datepicker('getDate') metoden returnerer den valgte dato i kalenderen.
  • setDate - .datepicker('setDate', dato) metode giver dig mulighed for at indstille en dato i kalenderen. Værdien af ​​date-argumentet kan være en streng (for eksempel: 10/25/1917)

I kontakt med

Beskrivelse: Fra et pop op-vindue eller en inline-kalender for at vælge en dato.

Ny version: 1.0

JQuery UI Datepicker Vælg en dato for at tilføje sidehøjde for at tilpasse pluginnet. Du kan tilpasse datoformatet og sproget, begrænse det datointerval, du vælger, tilføje knapper og andre navigationsmuligheder.

Som standard, når et tilknyttet tekstfelt har fokus, vises en lille åben datovælger-overlay. For en online-kalender skal du blot vælge den dato, der er knyttet til DIV eller intervallet.

tastatur interaktion

Når datovælgeren er åben, er følgende tastaturkommandoer tilgængelige:

  • PAGE UP: Gå til forrige måned.
  • SIDE NED: Flyt til næste måned.
  • CTRL + PAGE UP: Flyt til forrige år.
  • CTRL + PAGE DOWN: Gå til næste år.
  • CTRL + HJEM: Flyt den aktuelle måned. Hvis datovælgeren er lukket, er den åben.
  • CTRL + VENSTRE: Gå til dag.
  • CTRL + HØJRE: Gå til næste dag.
  • CTRL + OP: Gå til forrige uge.
  • CTRL + NED: Gå til næste uge.
  • ENTER: Vælg fokusdatoen.
  • CTRL + END: Luk datovælgeren og ryd datoen.
  • ESCAPE: Vandhanens lukkedato, uden noget valg.
Nyttige funktioner $ .datepicker.setDefaults (Indstillinger)

Skift standardindstillingerne for alle datovælgere.