JQuery kalendorius (datePicker). JQuery UI API – Datepicker Widget Calendar jquery UI datepicker
Sveiki visi, mieli Habr skaitytojai!
Šis straipsnis yra apie „jQuery“ vartotojo sąsają ir jos datos rinkiklio valdiklį.
Dažnai atsitinka taip, kad puslapyje reikia pasirinkti datos laikotarpį (o kartais net kelias atskiras datas). Tačiau „jQuery“ vartotojo sąsajos datų rinkiklis leidžia pasirinkti tik vieną datą viename kalendoriuje.
Todėl praktikoje įprastas sprendimas yra sukurti du įvesties laukus valdant tipą „nuo ir iki“. Taip pat galite rasti daugybę „ramentų“ būdų, kaip išspręsti šią problemą - tai mums netinka.
Taigi, mūsų tikslas yra išspręsti problemą su minimaliomis pastangomis naudojant tik „jQuery UI Datepicker“.
Siekiant išspręsti šią problemą, yra nedidelis „jQuery UI Datepicker“ plėtinys, kuris padidina standartines jo galimybes neprijungiant trečiųjų šalių valdiklių, papildinių ir stilių.
Tiems, kurie nesidomi naudoti standartiniu $.datepicker() valdikliu, paruošiau keletą nuorodų, tikiuosi, kad jos taip pat bus naudingos:
Straipsnis apie Habré (keleto datų pasirinkimas, laikotarpio pasirinkimas).
- Puikus DateTimePicker papildinys iš XDSoft (datos laikotarpio pasirinkimas, laiko pasirinkimas ir kitos įvairios funkcijos), vertas dėmesio
Yra ir kitų sprendimų, bet apie juos nesigilinsiu. Jei turite savo mėgstamus datos pasirinkimo kalendorius, mielai apie juos skaitysiu straipsnio komentaruose.
Plėtinys Aprašymas Plėtinys yra failas, išplečiantis valdiklio $.datepicker() galimybes naudojant objekto modelį. Neturi įtakos Datepicker funkcionalumui numatytuoju režimu. Taigi jums nereikės nerimauti, kad jūsų (jau parašytas) kodas sustos arba veiks kitaip.Plėtinys leidžia keisti datos pasirinkimo elgseną dviem režimais:
- Pasirinkite laikotarpį (dvi datos: laikotarpio pradžia ir pabaiga)
- Pasirinkite kelias datas (datų masyvą)
$("#date_range").datepicker(( diapazonas: "period", // galimos reikšmės: laikotarpis, keli diapazono_multiple_max: 3, // maksimalus pasirinktų datų skaičius "Kelių datų" režimu onSelect: function(dateText, inst , extensionRange ) ( // extensionRange – pridėtas grąžinimo argumentas, yra plėtinio objektas ) )); // Metodas "setDate" dabar gali priimti masyvą: 2 elementus su range="period" arba daugiau elementų su range="multiple" // $("#date_range").datepicker("setDate", ["+2d" ", "+1w"]); // rekomenduojama naudoti įvykį "onSelect", kad pakeistumėte formos laukų (arba scenarijaus kintamųjų) reikšmes // tačiau norėdami lanksčiau valdyti, galite gauti plėtinio objektą ir dirbti su informacija apie pasirinktą datos var extensionRange = $("#datos_diapazonas").datos rinkiklis ("valdiklis").data("datepickerExtensionRange"); console.log(extensionRange.datesText); // datų masyvas (data formatu, naudojamu datepicker) console.log(extensionRange.startDateText); // laikotarpio pradžia (data formatu, naudotu datos rinkiklyje) console.log(extensionRange.endDateText); // laikotarpio pabaiga (data formatu, naudotu datos rinkiklyje) console.log(extensionRange.dates); // datų masyvas (datos objektas) console.log(extensionRange.startDate); // laikotarpio pradžia (datos objektas) console.log(extensionRange.endDate); // laikotarpio pabaiga (datos objektas)
Nauji kalendoriaus langelių stiliai
Pasirinkta() /* pasirinkta data */ .selected-start() /* pirmoji laikotarpio data */ .selected-end() /* paskutinė laikotarpio data */ .first-of-month() /* pirmoji mėnesio data */ .paskutinė mėnesio data () /* paskutinė mėnesio data */
Vienoje iš pamokų sužinojome, kaip įvairiais būdais sujungti jQuery vartotojo sąsajos biblioteką. Šiandien pamokos tema bus datos rinkiklio valdiklis – jQuery UI Datapicker.
Kodėl reikalingas šis valdiklis? Norint pateikti vartotojui kalendorių įvedant datą, pildant formą, jam nereikia galvoti, kokiu formatu įvesti datas. Savo ruožtu išteklių administratorius gauna duomenis tuo pačiu formatu.
Šiuo adresu: https://jqueryui.com/datepicker/ Pamatysite keletą duomenų rinkiklio valdiklio parinkčių, mes pažvelgsime tik į dvi pagrindines.
„jQuery UI Datepicker“ – rodyti mėnesio ir metų meniuKai vartotojas spusteli įvesties teksto lauką, pasirodo kalendorius su datos pasirinkimu ir papildomas meniu su mėnesio ir metų pasirinkimu. Pasirinkimas su viena data tinka svetainėms, kuriose klientas nurodo, pavyzdžiui, savo apsilankymo datą.
HTML kodą sudaro viena įvesties žyma su identifikatoriumi „duomenų rinkiklis“, įvyniota į pastraipą – žyma p. Vietoj pastraipos ši įvestis gali būti dedama į bet kurį svetainės blokinį elementą.
Data:
„jQuery“ kodas turi būti nukopijuotas (peržiūrėti šaltinį) ir įklijuotas į svetainę, kaip parodyta pavyzdyje. Įkėlę DOM medį, teksto laukelyje gausime elementą ID #datapicker ir iškviesime .datepicker metodą. Dabar reikia perduoti objektą metodui, kuriuo aprašomi papildomi parametrai: changeMonth: true, changeYear: true . Dabar galima pasirinkti mėnesį ir metus išskleidžiamajame sąraše, tai yra šiek tiek patogiau, nei pasirinkti panašų kalendorių.
$(funkcija() (
$("#datepicker").datos rinkiklis((
pakeistiMėnuo: tiesa,
ChangeYear: tiesa
});
});
„Datapicker“ valdiklis su dienų sekos pasirinkimu „Datų diapazonas“ tinka svetainėms su rezervavimo sistema. Pirmajame kalendoriuje vartotojas nurodo pradžios datą, o antrajame – pabaigos datą. Sukurkime du įvesties teksto laukus su identifikatoriais „nuo“ ir „iki“ bei dvi etiketes, susietas su jų teksto laukais.
Nuo
į
Gauname elementą su identifikatoriumi #from – pirmąjį teksto lauką ir jame iškviečiame duomenų rinkiklio metodą.
$(funkcija() (
var dateFormat = "mm/dd/yy",
nuo = $("#nuo")
.datepicker((
Nustatykime numatytąją datą ir vieną savaitę.
Numatytoji data: „+1w“,
Galimybė pakeisti mėnesį naudojant išskleidžiamąjį sąrašą.
Pakeisti mėnesį: tiesa,
Mėnesių skaičius: 3 ))
Kai įvyksta įjungimo įvykis, tai yra, vartotojas pasirenka ką nors iš išskleidžiamojo sąrašo, tada pasikeitus pasirinktai datai surandame antrąjį datos rinkiklį ir nustatome minimalią datą, lygią pasirinktai.
On("pakeisti", funkcija() (
to.datepicker("parinktis", "minDate", getDate(this));
}),
iki = $("#iki").datos rinkiklis
Keisdami pasirinktą datą surandame pirmąjį datos rinkiklį ir nustatome maksimalią datą, lygią pasirinktai.
On("pakeisti", funkcija() (
from.datepicker("parinktis", "maxDate", getDate(this));
});
Visas kodas ir vaizdiniai visų parinkčių su skirtingais jQuery Datapicker valdiklio parametrais pavyzdžiai yra svetainėje jqueryui.com.
„jQuery UI Datepicker“ – lokalizuokite kalendoriųPagal numatytuosius nustatymus kalendorius rodomas anglų kalba, tačiau tai galima pakeisti, jQuery vartotojo sąsajos biblioteka palaiko kelias kalbas.
Atsisiųskite reikiamą kalbos failą iš Github
Į galvos žymą įtraukiame reikiamą kalbos modulį.
Sukuriame kalendoriaus teksto lauką ir išskleidžiamąjį sąrašą su ID „locale“, kuriame pateikiamos reikalingos kalbos.
Data:
Anglų
rusų (rusų)
Įkėlę DOM medį, ieškokite duomenų rinkiklio objekto. Keičiame visų datos rinkėjų nustatymus.
$(funkcija() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);
„Datos rinkiklio“ lokalizacijos pakeitimas .
$("#locale").on("pakeisti", funkcija() (
Pakeiskite lokalizaciją, kai išskleidžiamajame sąraše pasirenkate naują reikšmę.
$("#datepicker").datepicker("parinktis",
$.datepicker.regional[ $(this).val() ]);
Datos rinkiklio valdiklis
Šis straipsnis yra apie Datepicker valdiklį – patogų interaktyvų kalendorių, kuris palengvina datų įvedimą. Kalendoriaus informacijos kaip teksto gavimas iš vartotojų visada yra iššūkis, nes yra daug skirtingų datų išreiškimo formatų. Datos rinkiklio valdiklis leidžia lengvai pasirinkti datą ir pateikti ją nuosekliai, taip sumažinant klaidų tikimybę.
Datos rinkiklio valdiklio kūrimasYra du pagrindiniai būdai, kaip sukurti datos rinkiklio valdiklį. Dažniausias būdas jį prijungti prie įvesties elemento yra naudoti datepicker() metodą. Tai iš karto nepakeičia elemento išvaizdos, bet kai tik elementas gauna įvesties fokusą (paspaudus jį arba naršant iš kitų elementų naudojant klavišą), šalia jo bus rodomas kalendorius, su kuriuo galėsite pasirinkite norimą datą.
Aprašyto tipo kalendoriai vadinami iššokantys kalendoriai. Žemiau pateikiamas tokio kalendoriaus kūrimo pavyzdys:
jQuery vartotojo sąsajos įvestis (plotis: 200 taškų; teksto lygiavimas: kairėje) $(function() ( $("#date").datepicker(); )); Data:
Paveikslėlyje parodyta, kas nutinka, kai fokusuojate į įvesties lauką:
Vartotojas gali įvesti datą rankiniu būdu arba pasirinkti ją naudodamas kalendorių. Kai įvesties elementas praranda fokusą arba vartotojas paspaus (arba) klavišą, kalendorius išnyks.
Datos rinkiklio valdiklio lokalizavimasKaip matote, pateiktame pavyzdyje kalendorius rodomas anglų kalba. „jQuery UI Datepicker“ valdiklis suteikia gana visapusišką įvairių visame pasaulyje naudojamų datos formatavimo standartų palaikymą, įskaitant 61 lokalizavimo parinktį. Norėdami juos pasiekti, turite importuoti vieną JavaScript pagalbinį scenarijų į savo dokumentą ir nurodyti Datepicker valdikliui, kurią lokalizacijos parinktį naudoti. Atitinkamas pavyzdys pateikiamas žemiau:
... ... $(function() ( $("#data").datos rinkiklis($.datepicker.regional["ru"]); )); ...
Failas jquery-ui-i18n.js yra jQuery UI bibliotekos archyvo failo, kurį turėjote atsisiųsti iš jqueryui.com, aplanke development-bundle/ui/i18n. Nukopijuokite jį į tą patį aplanką, kuriame yra šaltinio failas, ir pridėkite jį prie dokumento, kaip parodyta kode. Rezultatas parodytas paveikslėlyje:
Antrasis datos rinkiklio valdiklio naudojimo būdas yra įterpti jį į dokumentą. Norėdami tai padaryti, naudodami jQuery pasirinkite div arba span elementą ir iškvieskite datepicker() metodą. Integruotas kalendorius rodomas tol, kol matomas HTML elementas, kuriuo jis pagrįstas. Toliau pateikiamas integruoto kalendoriaus kūrimo pavyzdys:
„jQuery“ vartotojo sąsajos etiketė (dešinė paraštė: 12 taškų; ) įvestis (plotis: 200 taškų; teksto lygiavimas: kairėje; paraštės dešinėje: 10 pikselių) #wrapper > * (slankioji: kairė) $(function() ( $("#inline" .datepicker($.datepicker.regional["ru"] )); Data:
Šiame pavyzdyje span elementas naudojamas kaip pagrindinis HTML elementas norint sukurti datos rinkiklio valdiklį. Rezultatas parodytas paveikslėlyje:
Integruotas kalendorius gali būti naudingas, jei nenorite dirbti su iššokančiais objektais. Žinoma, yra programų, kuriose darbas su datomis yra toks intensyvus, kad prasminga visada turėti po ranka kalendorių. Tačiau daugeliu atvejų prasminga palikti kalendorių paslėptą, kol jo prireiks.
Slėpti ir rodyti įterptąjį datos rinkiklio valdiklį sunku tai, kad norint jį įtraukti į dokumentą reikia pakeisti puslapio išdėstymą, o tai gali sukelti pristatymo problemų. Mano požiūriu, daugumoje situacijų daug patogiau naudoti iššokantįjį valdiklį.
Datos rinkiklio valdiklio nustatymasJei anksčiau buvote susidūrę su datos apdorojimu, tuomet puikiai žinote, kaip sunku dirbti su šios kategorijos duomenimis. Šio sudėtingumo atspindys yra datos rinkiklio valdiklio palaikomų savybių įvairovė. Tolesni skyriai yra skirti susijusių ypatybių, su kuriomis sukonfigūruotas šis valdiklis, grupių aprašymui.
Pagrindiniai nustatymaiNorint konfigūruoti pagrindines iššokančiųjų ir įterptųjų kalendorių savybes, naudojamos kelios konfigūracijos parinktys. Šios savybės yra labai svarbios, nes leidžia valdyti valdiklio integravimą į dokumentą. Jų sąrašas pateiktas žemiau esančioje lentelėje:
| altField | Leidžia nurodyti papildomą lauką, kuris bus atnaujintas, kai kalendoriuje pasirinksite datą |
| mygtukasTik vaizdas | Nurodoma, kad norint atidaryti kalendorių, vietoj antrinio mygtuko turėtų būti naudojamas vaizdas, nurodytas mygtukoVaizdas. |
| mygtukasVaizdas | Apibrėžia vaizdo, naudojamo iššokančiam kalendoriaus atidarymo antriniam mygtukui, URL. Pagal numatytuosius nustatymus nenaudojama |
| mygtukasTekstas | Apibrėžia tekstą, kuris bus rodomas iššokančiojo kalendoriaus atidarymo mygtuke. Numatytasis tekstas yra elipsė (...) |
| numatytoji data | Leidžia nustatyti datą, kuri bus paryškinta atidarius kalendorių |
| neįgalus | Nurodo, ar valdiklis iš pradžių turi būti išjungtas. Numatytoji vertė yra klaidinga |
| showOn | Apibrėžia veiksmą, kuris suaktyvina iššokančiojo kalendoriaus atidarymą. Numatytoji reikšmė yra fokusavimas |
Paprasčiausias nustatymas taip pat yra naudingiausias. Naudodami numatytąją datos parinktį galite nurodyti datą, kuri bus automatiškai paryškinta atidarius kalendorių.
Jei numatytoji datos parinktis nenustatyta, vietoj jos naudojama dabartinė data. (Žinoma, tai reiškia vartotojo sistemoje nustatytą datą. Dėl laiko juostų, vasaros laiko ar netinkamų konfigūracijų vartotojui rodoma data gali būti ne tokia, kokios tikėjotės. )
Ši parinktis naudojama tik tuo atveju, jei įvesties elemente nėra reikšmės atributo. Jei šis atributas yra (nesvarbu, ar jį įtraukėte į dokumentą, ar tai yra vartotojo išankstinio pasirinkimo rezultatas), datos rinkiklio valdiklis naudos jo reikšmę.
Jei norite, kad kalendorius būtų atidarytas su kita pradžios data, galite ją nustatyti naudodami vieną iš toliau pateiktoje lentelėje aprašytų metodų:
| nulinis | Naudojama dabartinė data |
| Datos objektas | Naudoja vertę, pateiktą kaip „JavaScript“ datos objektas |
| +dienos, -dienos | Naudoja datą, kuri nuo dabartinės datos skiriasi nurodytu dienų skaičiumi. Taigi +3 reiškia datą, kuri įvyks praėjus trims dienoms po dabartinės, o -2 reiškia datą prieš dvi dienas |
| +1d +7w -1m +1m | Naudojama data, kuri matuojama nuo dabartinės datos ir išreiškiama dienų skaičiumi (d), savaitėmis (w), mėnesiais (m) ir metais (y), kurie nustato, kiek data perkelta į priekį (+). arba atgal (-) laiku. Per vieną datą leidžiama maišyti teigiamas ir neigiamas vertes. Pavyzdžiui, reikšmių derinys -1d +1m, naudojamas kartu su data 2011 m. lapkričio 12 d., atitinka 2011 m. gruodžio 11 d. |
Pavyzdys, kaip naudoti parinktį defauitDate norint nurodyti datą, kuri yra po penkerių metų, pateikiamas toliau:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));
Tarkime, kad dabartinė data yra 2013 m. gruodžio mėn. Tada, kaip parodyta paveikslėlyje žemiau, data, nustatyta pagal parinkties defauitDate reikšmę, atitinka 2018 m. gruodžio mėn.:
Su aprašytu formatu santykinėms datoms nurodyti susidursite ne vieną kartą. Tai labai lankstus formatas, užtikrinantis reikiamą tikslumą. Taip pat, kaip ir pavyzdyje, galite praleisti bet kokį intervalą, kurio neketinate keisti. Pavyzdžiui, vietoj reikšmės „+0d +0w +0m +5y“ visiškai įmanoma naudoti reikšmę „+5y“. Puikus šio formato dalykas yra tai, kad jis leidžia maišyti teigiamas ir neigiamas skirtingų intervalų reikšmes, o tai leidžia tiksliai nustatyti norimą datą.
Įvykio, kuris suaktyvina iššokančiojo kalendoriaus atidarymą, apibrėžimasShowOn parinktis leidžia valdyti įvykį, į kurį reaguojant turėtų būti rodomas iššokantis kalendorius. Ši parinktis gali turėti vieną iš trijų reikšmių:
sutelkti dėmesįIššokantis kalendorius atsidaro, kai įvesties elementas sufokusuojamas. Tai yra numatytoji reikšmė.
mygtukąIššokantis kalendorius atsidaro paspaudus mygtuką.
tiekIššokantis kalendorius pasirodo ir paspaudus mygtuką, ir kai įvesties elementas sufokusuojamas.
Jei naudojate mygtuką arba abi reikšmes, datos rinkiklio valdiklis sukuria mygtuko elementą ir įdeda jį į dokumentą iškart po įvesties elemento. Toliau pateikiamas „showOn“ parinkties naudojimo pavyzdys:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "abi" )); ));
Kaip parodyta paveikslėlyje, dokumente atsirado mygtukas. Kadangi šiame pavyzdyje parinktis „showOn“ nustatyta į abu, iššokantis kalendorius bus rodomas ir spustelėjus mygtuką, ir tada, kai įvesties elementas bus sufokusuotas.
Datos rinkiklio valdiklio pridėtas mygtukas nėra „jQuery UI Button“ valdiklis. Jei norite, kad visi mygtukai būtų vienodo tipo, pasirinkite mygtuko elementą ir iškvieskite jQuery UI button() metodą.
Mygtuko elemento stilių galima sukurti naudojant mygtuko Vaizdo ir mygtukoText parinktis. Jei parinktį buttonImage nustatysite kaip vaizdo URL, datos rinkiklio valdiklis įdės tą vaizdą ant mygtuko. Be to, numatytąjį tekstą, susietą su mygtuku (elipsis), galima pakeisti kitu tekstu, naudojant parinktį buttonText, kaip parodyta toliau pateiktame pavyzdyje:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "abu", mygtukoTekstas: "Pasirinkti" )); ) );
Naudodami mygtukoImage ir buttonImageOnly parinktis kartu, galite visiškai atsikratyti mygtuko, pakeisdami jį vaizdu. Atitinkamas pavyzdys pateikiamas žemiau:
„jQuery“ vartotojo sąsajos etiketė (paraštė dešinėje: 12 taškų) įvestis (plotis: 200 taškų; teksto lygiavimas: kairėje) #dpcontainer * (vertikalus lygiavimas: viduryje) #dpcontainer img (plotis: 35 piks.;) $(function() ( $.datepicker) .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "abu", buttonImage: "right.png", buttonImageOnly: true )); Data:
Šiame pavyzdyje vaizdas nustatomas į right.png, o parinktis buttonImageOnly nustatoma į true. Be to, prie dokumento buvo pridėti keli CSS stiliai, skirti valdyti vaizdo vietą etiketės ir įvesties elementų atžvilgiu. Datos rinkiklio valdiklis negali tiksliai nustatyti, kur įdėti img elementą, todėl reikėjo pritaikyti CSS stilius, kad img elementas būtų tinkamai išdėstytas dokumente. Vaizdo, o ne mygtuko naudojimo rezultatas parodytas paveikslėlyje:
Datos rinkiklio valdiklio paskirtis yra leisti vartotojui pasirinkti datą, tačiau daugeliu atvejų šiam procesui reikia nustatyti tam tikrus apribojimus. Toliau pateiktoje lentelėje aprašomi nustatymai, leidžiantys nustatyti apribojimus, kurie verčia vartotoją pasirinkti tik galiojančias datas:
| pakeistiMėnuo | Jei ši parinktis teisinga, kalendoriuje rodomas išskleidžiamasis sąrašas, leidžiantis tiesiogiai naršyti pagal mėnesį. Numatytoji vertė yra klaidinga |
| keistiMetai | Jei ši parinktis teisinga, kalendoriuje rodomas išskleidžiamasis sąrašas, leidžiantis tiesiogiai naršyti pagal metus. Numatytoji vertė yra klaidinga |
| constrainInput | Jei ši parinktis teisinga, datos rinkiklio valdiklis patikrina, ar įvesties lauko turinys atitinka nurodytą datos formatą. Numatytoji reikšmė yra tiesa |
| slėptiIfNoPrevNext | Jei ši parinktis teisinga, piktogramos, leidžiančios kalendoriuje judėti pirmyn ir atgal, palyginti su rodoma data, yra visiškai paslėptos, o ne tiesiog išjungtos. Numatytoji vertė yra klaidinga |
| maxDate | Nurodo maksimalią pasirinkimo datą. Pagal numatytuosius nustatymus nėra jokių apribojimų |
| minDate | Apibrėžia minimalią pasirinkimo datą. Pagal numatytuosius nustatymus nėra jokių apribojimų |
| Mėnesių skaičius | Nustato mėnesių, kurie vienu metu rodomi kalendoriuje, skaičių. Numatytoji reikšmė yra 1 |
| showCurrentAtPos | Jei kalendoriuje nustatyta, kad vienu metu būtų rodomi keli mėnesiai, ši parinktis nurodo pozicijos numerį, kuriame turi būti rodomas dabartinis arba numatytasis mėnuo. Numatytoji reikšmė yra 0 |
| žingsnisMėnesiai | Nustato, kiek mėnesių į priekį arba atgal kalendoriuje rodoma data turi būti perkelta, kai paspausite laiko mygtuką pirmyn arba atgal |
| metų diapazonas | Apibrėžia metų diapazoną, kurį galima pasirinkti išskleidžiamajame sąraše, pridėtame naudojant parinktį ChangeYear. Pagal numatytuosius nustatymus šis sąrašas apima ankstesnius dešimt metų, kitus dešimt metų ir einamuosius metus. |
Nustatę constrainInput parinktį į true, galite apriboti simbolių įvedimą teksto lauke tik tais simboliais, kurie atitinka griežtai apibrėžtą formatą. Leidžiamas simbolių rinkinys nustatomas pagal pirmiau aptartus lokalizacijos nustatymus. Jei datos rinkiklio valdiklis nebuvo lokalizuotas, galite tikėtis, kad leidžiami simboliai apims tik skaičius ir pasvirąjį brūkšnį (/).
Nurodytos vertės naudojimas constrainInput parinkčiai nereiškia, kad vartotojas negalės įvesti netinkamos datos, pvz., 99/99/99, tačiau tai žymiai sumažina klaidų tikimybę. Šis nustatymas yra dar svarbesnis, jei parinktis „showOn“ nustatyta kaip mygtukas, nes tada iššokantis kalendorius nebus automatiškai atidarytas, kai įvesties laukas bus sufokusuotas.
Paprastai vartotojai nori naudoti kalendorių datai pasirinkti, tačiau norėdami tai padaryti, jie turi jį matyti. Jei kalendorius nerodomas ekrane, ne kiekvienas vartotojas supras, kad kalendoriui atidaryti pakanka paspausti mygtuką. Bet kuri parinktis, kurią suteikiate vartotojui tiesiogiai įvesti datą į teksto lauką, padidina tikimybę, kad įvestos datos formatas bus neteisingas. Toliau pateikiamas parinkties constrainInput naudojimo pavyzdys:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));
Čia vertė true priskiriama parinkčiai constrainInput tik dėl aiškumo, nes tai yra numatytoji šios parinkties reikšmė. Likusios dvi parinktys leidžia apriboti galimų pasirinkti datų diapazoną iki minimalios ir maksimalios datos.
Kaip ir anksčiau aptartos numatytosios datos parinkties atveju, minDate ir maxDate parinkčių reikšmės gali būti null (neapibrėžta data), JavaScript Date objektas, dienų skaičius ir santykinė datos eilutė. Šiame pavyzdyje pasirinktas skaitinis vaizdas, nurodantis dienų skaičių, palyginti su dabartine data.
Paveiksle matote, kad datos rinkiklis išjungia kalendoriaus langelius, kurių negalima pasirinkti:
Atkreipkite dėmesį, kad mėnesio mygtukai automatiškai išjungiami, jei jų nereikia. Šie mygtukai yra kalendoriaus viršuje kairėje ir dešinėje ir leidžia greitai pereiti prie kito ar ankstesnio mėnesio. Kaip parodyta paveikslėlyje, visos pasirenkamos datos yra einamojo mėnesio, todėl abu mygtukai yra išjungti. Tokiose situacijose šiuos mygtukus galima visiškai paslėpti, jei reikia, nustačius parinktį hideIfNoPrevNext į true.
MinDate reikšmė neturi būti praeityje ir maxDate reikšmė ateityje, taip pat ji neturi būti abi reikšmės vienu metu. Kad vartotojas galėtų pasirinkti datas iš diapazono, prieš kurį yra tam tikras "paruošiamasis" laikotarpis, galite nustatyti minDate parinkties reikšmę ateityje, taip neleisdami vartotojui pasirinkti datų per tą laikotarpį, kaip parodyta toliau pateiktame pavyzdyje. :
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))
Šiame pavyzdyje nurodėme, kad vartotojas neturėtų galėti pasirinkti datų, ankstesnių nei 4 dienos po dabartinės datos. Parinktis maxDate yra neapibrėžta, o tai reiškia, kad vartotojas galės pasirinkti bet kurią datą po nurodyto „delsimo laikotarpio“. Rezultatas parodytas paveikslėlyje:
Atkreipkite dėmesį, kad tokioje situacijoje kito mėnesio mygtukas įjungtas, o ankstesnio mėnesio mygtukas išjungtas (dėl to, kad vartotojas negali pasirinkti ankstesnių datų).
MinDate ir maxDate parinktys veikia kartu su defaultDate parinktimi, o tai reiškia, kad diapazonų susiejimas su dabartine data yra neprivalomas.
Sukurkite kalendorių, kuriame vienu metu būtų rodomi keli mėnesiaiDatos rinkiklio valdiklis leidžia nustatyti mėnesių skaičių, kuris turi būti vienu metu rodomas kalendoriuje, naudojant parinktį numberOfMonths. Tai galima padaryti nurodant reikiamą mėnesių skaičių arba dviejų elementų masyvą, apibrėžiantį mėnesio kalendoriaus tinklelio matmenis.
Toliau pateiktame pavyzdyje įgyvendinamas masyvu pagrįstas metodas, kuris, mano nuomone, geriausiai tinka integruotiems datos rinkiklio valdikliams, nes tinklelio dydis dažnai yra per didelis iššokančiųjų langų valdikliams (prie to grįšime vėliau).
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));
Šiame pavyzdyje nurodoma vieno mėnesio aukščio ir trijų mėnesių pločio kalendoriaus tinklelis. Rezultatas parodytas paveikslėlyje:
Dviejų elementų masyvas yra lygiavertis skaitinei reikšmei 3. Jei parametro numberOfMonths reikšmė nurodyta kaip skaičius, valdiklis rodo atitinkamą mėnesių skaičių vienoje eilutėje.
Priežastis, dėl kurios retai naudoju šį metodą dirbdamas su iššokančiaisiais kalendoriais, yra ta, kad naudojant didelius tinklelius turite daryti tam tikras prielaidas dėl naršyklės lango ir ekrano dydžių. Iššokantis valdiklio langas Datepicker nėra operacinės sistemos dialogo langas. Tai sumaniai sukurtas HTML elementas, kuris rodomas kaip HTML dokumento dalis. Tai reiškia, kad kai dideli kalendoriaus tinkleliai rodomi mažame ekrane arba mažame naršyklės lange, didžioji dalis likusios dokumente esančios informacijos bus rodoma už ekrano ribų.
Suteikia tiesioginę prieigą prie mėnesių ir metųUžuot tiesiog rodę mėnesius ir metus kalendoriaus antraštėje, galite suteikti tiesioginę prieigą prie atitinkamų laikotarpių naudodami išskleidžiamuosius sąrašus. Ši funkcija suteikia greitį, kai naudotojai turi pasirinkti datas iš daugybės galimų datų, ir yra įdiegta naudojant parinktis changeMonth ir changeYear.
Nustačius bet kurią iš šių parinkčių tiesą, bus įjungtas atitinkamas išskleidžiamasis sąrašas ir galėsite savarankiškai valdyti, ar sąrašai įjungti. Toliau pateikiamas šių parinkčių naudojimo pavyzdys:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( changeMonth: true, changeYear: true, yearRange: "-1:+ 2" )); ));
Šiuo atveju abu išskleidžiamieji sąrašai yra įjungti. Be to, metų diapazono parinktis naudojama siekiant apriboti metų intervalą, tarp kurių vartotojui leidžiama pereiti. Reikalingas diapazonas nurodomas naudojant reikšmę „-1:+2“, o tai reiškia, kad kalendorius leidžia vartotojui pereiti vienerius metus atgal ir dvejus metus į priekį nuo einamųjų metų.
Išskleidžiamieji sąrašai ir nurodytas metų intervalas rodomi paveikslėlyje:
Apibrėždami metų intervalus, galite naudoti parinktį Year Range, kad nurodytumėte faktinius metus. Taigi, šiame pavyzdyje galite nurodyti reikšmę: „2012:2015“.
Datos rinkiklio valdiklio išvaizdos valdymasYra keletas ypatybių, kurios leidžia tinkinti datos rinkiklio valdiklio išvaizdą, kai jis rodomas vartotojui. Atlikdami įprastas datos pasirinkimo užduotis, galite pasitenkinti numatytuoju kalendoriaus išvaizda, kurią jau žinote iš ankstesnių pavyzdžių, tačiau galimybė tinkinti išvaizdą, kad ji atitiktų jūsų konkrečios žiniatinklio programos poreikius, yra labai naudinga.
Savybės, leidžiančios pakeisti datos rinkiklio valdiklio išvaizdą, pateiktos toliau esančioje lentelėje:
| pridėtiTekstas | Nurodo patarimo tekstą su papildoma informacija, pvz., datos formatavimo paaiškinimu, kuris bus įterptas į dokumentą po įvesties elemento |
| UždarytiText | Nustato kalendoriaus uždarymo mygtuko, kuris rodomas pagalbinėje mygtukų juostoje, kai jis įjungtas, tekstą. Numatytoji reikšmė yra „Uždaryti“ |
| dabartinisTekstas | Nustato grįžimo į dabartinį mėnesį mygtuko tekstą, kuris rodomas pagalbinėje mygtukų juostoje, kai įjungta. Numatytoji reikšmė yra „Šiandien“ |
| trukmės | Nustato animacijos greitį arba trukmę, nurodytą parinktyje showAnim. Numatytoji reikšmė yra normali |
| goto Current | Jei ši parinktis teisinga, mygtukas Šiandien, esantis pagalbininko mygtukų juostoje, jei įjungtas, grįš į pasirinktą datą, o ne į dabartinę datą. Numatytoji vertė yra klaidinga |
| pasirinkite Kiti mėnesiai | Jei ši parinktis teisinga, galima pasirinkti datas, rodomas nustačius parinktį showOtherMonths į true. |
| showAnim | Nustato animacijos tipą, naudojamą iššokantiems kalendoriams rodyti ir slėpti. Numatytoji vertė yra klaidinga |
| showButtonPanel | Jei ši parinktis teisinga, kalendoriuje bus rodomas pagalbinis skydelis su mygtukais, leidžiančiais vartotojui pereiti prie dabartinės datos ir (jei naudojamas iššokantis valdiklis) uždaryti kalendorių. Numatytoji vertė yra klaidinga |
| parodų parinktys | Nustato animacijos parinktis, nurodytas parinktyje showAnim |
| rodytiKiti Mėnesiai | Jei ši parinktis teisinga, tušti kalendoriaus tinklelio laukai bus užpildyti ankstesnių ir vėlesnių mėnesių datomis. Numatytoji vertė yra klaidinga |
| parodos savaitė | Jei ši parinktis teisinga, kalendoriuje bus rodomas stulpelis su savaitės numeriais. Numatytoji vertė yra klaidinga |
| savaitės antraštė | Nurodomas kalendoriaus stulpelio pavadinimas su savaitės skaičiais, kuriuos įgalino parinktis showWeek. Numatytoji vertė yra "Trečiadienis" |
Kai kuriose programose svarbu žinoti savaitės skaičių metais, kuriais patenka konkreti data. Pavyzdžiui, to reikalaujama daugelyje apskaitos programų. Datos rinkiklio valdiklyje galite valdyti savaitės informacijos rodymą naudodami parinkčių showWeek ir weekHeader, kaip parodyta toliau pateiktame pavyzdyje:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, weekHeader: "Savaitės Nr." )); ) ) ;
Jei parinktis showWeek yra teisinga, kalendoriuje rodomas stulpelis su savaitės numeriais. Numatytoji šio stulpelio antraštė yra „Savaitė“, tačiau ją galima pakeisti naudojant savaitės antraštės parinktį. Pavyzdyje rodomas savaičių stulpelis, kuris pervadintas į „Savaitė #“:
Pagal numatytuosius nustatymus kalendoriuje rodomos tik tos datos, kurios patenka į dabartinį mėnesį. Tai reiškia, kad kalendoriaus tinklelyje gali būti tuščių langelių. Galite leisti tuščius langelius užpildyti ankstesnių ir vėlesnių mėnesių datomis, nustatydami parinktį showOtherMonths į true, kaip parodyta toliau pateiktame pavyzdyje:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));
Rezultatas parodytas paveikslėlyje žemiau. Tokiu atveju datos, priklausančios kitiems mėnesiams, tampa prieinamos, jei parinktis SelectOtherMonths nustatyta kaip tiesa:
Nustačius parinktį „showButtonBar“ į „true“, datos rinkiklio valdiklio lango apačioje bus pridėta papildomų mygtukų juosta. Iššokančiojo kalendoriaus atveju skydelyje yra du mygtukai: „Šiandien“ ir „Uždaryti“. Mygtukas Šiandien leidžia grįžti į dabartinę datą, o mygtukas Uždaryti uždaro kalendoriaus langą. Šių mygtukų tekstą galima pakeisti naudojant parinktis currentText ir closeText.
Jei parinktis goToCurrent nustatyta kaip tiesa, kalendorius grįš į pasirinktą datą, o ne į dabartinę datą. Ši priemonė yra naudinga, jei datos rinkiklio valdiklis sukonfigūruotas su konkrečia numatytosios datos parinkties reikšme. Jei datos pasirinkimo tikslas yra susijęs su praeities ar ateities įvykiais, tai grįžti prie esamos datos ne visada tikslinga. Atitinkamas pavyzdys pateikiamas žemiau:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate : "+1m +1m" )).val("2014-12-20" ));
Atkreipkite dėmesį, kad naudojant parinktį goToCurrent mygtukas paspaudžiamas norint pereiti prie pasirinktos datos. Šiame pavyzdyje pasirinkta data yra įvesties elemento vertės atributas, bet jei vartotojas pasirenka kitą datą ir vėl atidaro kalendorių, spustelėjus mygtuką kalendorius bus grąžintas į vartotojo pasirinktą datą, o ne į nurodytą datą.
Metodai, kuriuos palaiko Datepicker valdiklis, išvardyti toliau esančioje lentelėje:
| datos rinkiklis ("sunaikinti") | Visiškai pašalina datos rinkiklio valdiklio funkciją iš pagrindinio elemento |
| datos rinkiklis ("išjungti") | Pristabdo pagrindinio elemento datos rinkiklio valdiklį |
| datos rinkiklis („įgalinti“) | Atnaujina anksčiau pristabdytą pagrindinio elemento datos rinkiklio valdiklį |
| datos rinkiklis ("parinktis", parinktys) | Leidžia gauti arba nustatyti vienos ar kelių Datepicker valdiklio parinkčių reikšmes |
| datos rinkiklis („yra išjungta“) | Grąžina true, jei datos rinkiklio valdiklis išjungtas |
| datos rinkiklis ("slėpti") | Slepia iššokantįjį kalendorių, jei jis matomas |
| datos rinkiklis("rodyti") | Rodo iššokantį kalendorių, jei jis nematomas |
| datos rinkiklis ("atnaujinti") | Atnaujina kalendorių, kad atspindėtų pagrindinio elemento pakeitimus |
| datos rinkiklis ("gauti datą") | Gauna kalendoriuje pasirinktą datą |
| datos rinkiklis("setDate", data) | Nustato nurodytą reikšmę kaip pasirinktą kalendoriaus datą |
Dažniausiai naudoju getDate ir setDate metodus, kai noriu suteikti vartotojams galimybę pasirinkti visas dienų sekas naudojant kelis Datepicker valdiklius. Tokiose situacijose aš norėčiau nerodyti pasirinktų datų teksto laukuose ir rodyti tik dienų skaičių tarp nurodytų ribinių datų. Atitinkamas pavyzdys pateikiamas žemiau:
„jQuery“ vartotojo sąsajos etiketė (paraštė: 12 tšk.) įvestis (plotis: 200 tšk.; teksto lygiavimas: kairėje) #wrapper > * (slankioji: kairėn) #rezultatas (paraštė: automatinė; užpildymas: 10 piks.; plotis: 200 piks.; aiškus: kairėje) $( 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", data) . datepicker("įgalinti").datepicker("parinktis", "minDate", data) ) if (!$("#datePabaiga").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dataPabaiga"). ; ) )).filter("#dataPabaiga").datepicker("disable" )); Pradžia: Pabaiga: Dienų skaičius:
Šiame pavyzdyje sukuriami du kalendoriai, iš kurių vienas yra išjungtas iškart po dokumento įkėlimo. Norint atsakyti į vartotojo pasirinktas datas, naudojamas įvykis onSelect (apie kurį plačiau pakalbėsime vėliau).
Kai vartotojas pasirenka datą pirmame kalendoriuje, mes naudojame setDate metodą, kad paruoštume antrąjį kalendorių, o getDate metodą, kad gautume datas iš abiejų kalendorių ir tada apskaičiuotume skirtumą dienomis tarp pirmosios ir antrosios datos (paprastumo dėlei mes tarkime, kad abi datos yra iš to paties ir to paties mėnesio). Dokumento rodinys naršyklės lange parodytas paveikslėlyje:
Kaip ir visi „jQuery“ vartotojo sąsajos valdikliai, datos rinkiklio valdiklis palaiko įvykių rinkinį, leidžiantį jums gauti pranešimus apie svarbius programos būsenos pokyčius. Šie įvykiai parodyti toliau esančioje lentelėje:
Iš naujo nedemonstruosiu, kaip veikia onSelect metodas, nes jis jau buvo naudojamas keliuose pavyzdžiuose, įskaitant tą, kuris buvo aptartas ankstesniame skyriuje. Vienintelis dalykas, kurį noriu pabrėžti, yra tai, kad įvykių tvarkyklei perduoti argumentai yra pasirinktos datos ir įvykį iškėlusio datos rinkiklio egzemplioriaus eilutės.
Įvykis onChangeMonth leidžia reaguoti į įvykį, įvykusį, kai vartotojas pasirenka kitą mėnesį ar metus, naudojant išskleidžiamuosius sąrašus, įgalintus naudojant changeMonth ir changeYear parinktis arba mėnesio puslapio mygtukus.
Naudodami onClose metodą galite reaguoti į iššokančiojo kalendoriaus uždarymą. Šis įvykis suaktyvinamas, net jei vartotojas kalendoriuje nepasirinko datos. Įvykių tvarkyklės argumentai yra datos eilutės atvaizdavimas (arba tuščia eilutė, jei vartotojas uždarė langą nepasirinkęs) ir datos rinkiklio egzempliorius, kuris iškėlė įvykį.
Aprašymas: Iššokančiajame lange arba tiesioginiame kalendoriuje pasirinkite datą.
Nauja versija: 1.0
JQuery UI datos rinkiklis Pasirinkite datą, kad pridėtumėte puslapio aukštį, kad tinkintumėte papildinį. Galite tinkinti datos formatą ir kalbą, apriboti pasirinktą dienų seką, pridėti mygtukų ir kitas naršymo parinktis.
Pagal numatytuosius nustatymus, kai susietas teksto laukas yra paryškintas, rodoma nedidelė atidaryto datos rinkiklio perdanga. Jei norite naudoti internetinį kalendorių, tiesiog pasirinkite datą, pridėtą prie DIV arba intervalo.
klaviatūros sąveikaKai atidarytas datos rinkiklis, galimos šios klaviatūros komandos:
- PUSLAPĮ AUKŠTYN: eikite į ankstesnį mėnesį.
- PUSLAPĮ ŽEMYN: pereiti į kitą mėnesį.
- CTRL + PAGE UP: pereiti prie ankstesnių metų.
- CTRL + PAGE DOWN: eikite į kitus metus.
- CTRL + HOME: perkelti dabartinį mėnesį. Jei datos parinkiklis uždarytas, jis atidarytas.
- CTRL + KAIRĖ: pereiti prie dienos.
- CTRL + RIGHT: pereikite prie kitos dienos.
- CTRL + UP: eikite į ankstesnę savaitę.
- CTRL + DOWN: eikite į kitą savaitę.
- ENTER: pasirinkite fokusavimo datą.
- CTRL + END: uždarykite datos parinkiklį ir išvalykite datą.
- ECAPE: maišytuvo uždarymo data, be jokio pasirinkimo.
Pakeiskite numatytuosius visų datos rinkiklių nustatymus.
2012-08-20 Romčikas
Gera diena. Kitą dieną susidūriau su problema - vartotojas įvestyje turi nurodyti datą tam tikru formatu. Ilgai negrauždamas galvos nusprendžiau pasirūpinti, kad spustelėjus įvestį atsirastų kalendorius. Tai nesunku įgyvendinti, bet kodėl? Jei yra nuostabus jQuery kalendoriaus valdiklis – datos rinkiklis. Toliau kalbėsime apie datos rinkiklio įdiegimą, konfigūravimą ir prijungimą.
Pirmiausia pateiksiu aiškų pavyzdį, ką noriu daryti:
Na, aišku, kad pasirinkus datą kalendorius dingsta, o pasirinkta data pasirodo teksto laukelyje.
Pradėkime įgyvendinimą.
Eikite į oficialią „jQueryUI“ svetainę. Kad neatsisiųstumėte nieko nereikalingo, spustelėkite „Atšaukti visų komponentų pasirinkimą“.
Ir pasirinkite „Pagrindinis“:
Tai iš esmės viskas. Tačiau šis valdiklis turi iš anksto nustatytus ekranus (temas)
Viršutiniame dešiniajame kampe galite pasirinkti tinkamą temą, pasirinkti valdiklio versiją ir spustelėti „Atsisiųsti“:
Kitame etape išpakuokite archyvą.
Iš karto susitarkime dėl mūsų puslapio struktūros:
Dabar mes įdedame failus jquery-1.8.0.min.js ir jquery-ui-1.8.23.custom.min.js iš atsisiųsto archyvo į js aplanką. Dabar mes įdedame aplanką su datepicker temos pavadinimu (mano atveju tai yra ui-lightness) iš atsisiųsto archyvo css aplanko į mūsų puslapio css aplanką. Tai užbaigia jQuery Datepicker kalendoriaus valdiklio diegimą.
Pradėkime prisijungti prie Datepicker. Kaip jau sakiau, spustelėjus teksto laukelį noriu iškviesti kalendorių. Prie įvesties pridėkime id=”datepicker”, kad galėtume lengvai jį pasiekti.
Dabar parašykime nedidelį jQuery scenarijų, kuris iškvies kalendorių, kai spustelėsite šį bandymo lauką:
$(funkcija())( $("#datos rinkiklis").datos rinkiklis(; ));
Išsaugome ir tikriname.
Kalendoriaus valdiklio nustatymas naudojant jQuery Datepicker.Pirmas dalykas, kurį nustatysime, yra mūsų kalendoriaus tema. Žemiau pateiksiu lentelę su Datepicker temos pavadinimu ir jos rodymu:
| UI lengvumas | |
| UI tamsa | |
| Lygumas | |
| Pradėti | |
| Redmondas | |
| Saulėta | |
| Debesuota | |
| Le Frog | |
| Brūkštelėjimas | |
| Pipirų malūnėlis | |
| Baklažanas | |
| Tamsus avilys | |
| Cupertino | |
| Pietų gatvė | |
| Blitzeris | |
| Žmoniškumas | |
| Hot Sneaks | |
| Excite Bike | |
| Vaderis | |
| Dot Luv | |
| Mėtų skonis | |
| Juoda arbata | |
| Trontastinis | |
| Puošni piniginė |
Kaip matote, temų yra pakankamai, kad galėtumėte pasirinkti tinkamą, tačiau jei dėl kokių nors priežasčių tokios temos neradote, galite lengvai pakeisti vieną iš standartinių, pakeisdami datos rinkiklio stiliaus failą.
Datos rinkiklio nustatymai tuo nesibaigia, o iškviečiant datos rinkiklio funkciją galime perduoti papildomus parametrus:
| Parametras | apibūdinimas | Pavyzdys |
| išjungti: tiesa (klaidinga) Numatytasis: klaidingas | Įjungti arba išjungti datos parinkiklį | $(.selector”).datepicker(( išjungta: true )); |
| altField Numatytasis: tuščias | Nurodo elemento, kuris bus atnaujintas, parinkiklį | $(.selector”).datepicker(( altField: "#actualDate" )); |
| altFormatas Numatytasis: tuščias | dateFormat – datos formatas, naudojamas altField | $(.selector”).datepicker(( altFormatas: "yy-mm-dd" )); |
| apendTex Numatytasis: tuščias | Tekstas, kuris bus rodomas po kiekvieno datos lauko | $(.selector”).datepicker(( appendText: "(yyyy-mm-dd)" )); |
| automatinis dydis: tiesa (klaidinga) Numatytasis: klaidingas | Automatinis elemento dydžio nustatymas | $(.selector”).datepicker(( autoSize: true )); |
| datos formatas: Numatytasis: mm/dd/yy Žemiau esančioje lentelėje parodysiu, kokias vertes jis gali turėti. | Nurodo datos formatą | $(.selector”).datepicker(( dateFormatas: "yy-mm-dd" )); |
| dayNames Numatytas ["Sekmadienis Pirmadienis Antradienis Trečiadienis Ketvirtadienis Penktadienis Šeštadienis"] | Pilni savaitės dienų pavadinimai | $(.selector”).datepicker(( dayNames: ["pirmadienis", "antradienis", "trečiadienis", "ketvirtadienis", "penktadienis", "šeštadienis", "sekmadienis"] )); |
| dayNamesMin Numatytas: ["Su", "Mo", "Tu", "Mes", "Th", "Fr", "Sa"] | Savaitės dienų santrumpa | $(.selector”).datepicker(( dayNamesMin: ["pirmadienis", "antradienis", "trečiadienis", "ketvirtadienis", "penktadienis", "šeštadienis", "sekmadienis"] )); |
| dayNamesShort Numatytas: ["Sek", "pirmadienis", "antradienis", "trečiadienis", "ketvirtadienis", "penktadienis", "šeštadienis"] | Sutrumpinti savaitės dienų pavadinimai | $(.selector”).datepicker(( dayNamesShort: ["pirmadienis", "antradienis", "trečiadienis", "ketvirtadienis", "penktadienis", "šeštadienis", "sekmadienis"] )); |
| numatytoji data Numatytasis: tuščias Naudoja dateFormat parametrus kaip parametrus | Nurodo numatytąją datą | $(.selector”).datepicker(( defaultDate: +7 )); |
| mėnesio Vardai Numatytas: ["sausis", "vasaris", "kovas", "balandis", "gegužė", "birželis", "liepa", "rugpjūtis", "rugsėjis", "spalis", "lapkritis", "gruodis"] | Pilni mėnesių pavadinimai | $(.selector”).datepicker(( monthNames: ["sausis", "vasaris", "kovas", "balandis", "gegužė", "birželis", "liepa", "rugpjūtis", "rugsėjis", "spalis, lapkritis, gruodis"] )); |
| monthNamesShort Numatytas ["Sausis", "Vas.", "Kovas", "balandžio mėn.", "gegužė", "birželis", "liepa", "rugpjūtis", "rugsėjis", "spalis", "lapkritis", "gruodis"] | Sutrumpintas mėnesių pavadinimas | $(.selector”).datepicker(( monthNamesShort: ["Sausis", "Vas.", "Kovas", "balandžio mėn.", "gegužė", "birželis", "liepa", "rugpjūtis", "rugsėjis", „spalio“, „lapkričio“, „gruodžio“] )); |
Čia pateikiau tik pagrindinius parametrus, kurie gali būti jums naudingi. Jei norite pamatyti visą parametrų sąrašą, eikite į oficialią dokumentaciją
Dabar pažvelkime į parametro dateFormat reikšmes
Tai dabar.
Peržiūrėjome vieno iš nuostabių „jQuery“ valdiklių – datos rinkiklio kalendoriaus valdiklio – diegimą, prijungimą ir konfigūraciją.
Tikiuosi, kad straipsnis jums patiko. Jei turite klausimų, rašykite komentaruose.
Atsisveikinu su jumis ir sėkmingu interneto kūrimu.