DATETIMEPICKER plugin za sajt-instrukcije, konfiguracija, inicijalizacija
DateTimePicker je zgodan i lak za korištenje dodatak za brzu zamjenu datuma i vremena u polja za unos.
DateTimePicker je zgodan i lak za korištenje dodatak za brzu zamjenu datuma i vremena u polja za unos. Veoma je koristan kada se sadržaj popunjava više puta, štede korisnika od rutine pisanja datuma i vremena, pružajući mogućnost unosa vremena u polja obrasca „u dva klika“ bez prebacivanja sa tastature.
Prepoznatljive karakteristike i mogućnosti dodatka DateTimePicker:
- Jednostavan i zgodan interfejs.
- Pogodan i brz unos vremena „u dva klika“ (nije neophodna upotreba tastature).
- Podrška za ekran osjetljiv na dodir.
- Pametno pozicioniranje na ekranu bez zaklanjanja polja za unos.
Dodatak DateTimePicker sastoji se od glavnih dijelova:
- Demo HTML oznake.
- JQuery skripta sa plugin kodom.
- Fajl stila.
Primjer instaliranja dodatka DateTimePicker
Preuzmite arhivu s dodatkom i kopirajte njen sadržaj u direktorij vaše web stranice. Da bi skripta radila, morate imati povezanu jQuery biblioteku.
Inicijalizacija i konfiguracija dodatka
Povežite jQuery framework i sam dodatak na dokument
<link rel="stylesheet" href="/css/jquery.datetimepicker.css">
<script src="/js/jquery.js"></script>
<script src="/js/jquery.datetimepicker.js"></script>Da povežete dodatak sa poljem za unos, samo mu dodajte selektor:
<form action="/">
<input class="date" type="text" name="name"><br>
<button type="submit" name="submitbtn" value="Отправить">Отправить</button>
</form>Primjer inicijalizacije dodatka:
<script>
$('.date').datetimepicker({
lang:'de',
i18n:{de:{
months:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
dayOfWeek:["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa."]
}},
timepicker:false,
format:'d.m.Y'
});
</script>DateTimePicker je višejezični dodatak s podrškom za 3 jezika: engleski, ruski i njemački. Možete odabrati jezik, kao i druge prilagodljive parametre, tokom inicijalizacije. Kompletna lista dostupnih opcija nalazi se u nastavku.
Potpuna lista parametara
|
Ime |
default |
Svrha |
Primjer upotrebe |
|
vrijednost |
null |
Postavlja trenutnu vrijednost datetimepicker. Ako je postavljeno, input.value se zanemaruje |
{ vrijednost: 03/12/2013, |
|
lang |
en |
Jezik na kojem su prikazani dani u sedmici i mjeseci. Dodatak ima 3 ugrađena jezika: engleski - en, njemački - de i ruski - ru |
{ lang: 'ru', 'de', 'en' } |
|
formatu |
Y/m/d H:i |
Osnovni format vremena. Koristeći ovaj parametar, dodatak pretvara datum naveden u vrijednosti u svoj vlastiti format, s kojim zatim radi. Format je identičan onome što php koristi u funkciji datuma. Kompletnu listu možete pronaći u dokumentaciji. |
{ format: 'H' } // prikaz samo sati |
|
formatDate |
Y/m/d |
Ovo je format datuma usluge. Koristi se kako bi se osiguralo da dodatak ispravno interpretira vrijednosti opcija minDate i maxDate, koje će biti opisane u nastavku |
{ formatDate: 'dmY' } |
|
formatTime |
H:i |
Slično formatDate . Koristi se kako bi se osiguralo da dodatak ispravno interpretira vrijednosti minTime i maxTime opcija, koje će biti opisane u nastavku |
{ formatTime: 'H' } // samo sat |
|
korak |
60 |
U TimePicker-u se prikazuje lista opcija za odabir vremena u određenom intervalu u minutama. Podrazumevano je 1 sat (60 minuta). |
{korak: 5} |
|
closeOnDateSelect |
0 |
Ako su prikazani i DatePicker i TimePicker, tada se dodatak ne zatvara prilikom odabira datuma. On to radi tek nakon što odabere vrijeme. Ako je postavljeno na true, dodatak će biti zatvoren kada se odabere datum. Ako je netačno, onda čak i ako birač vremena nije prikazan, dodatak neće biti zatvoren. |
{ closeOnDateSelect: true } |
|
closeOnWithoutClick |
istinito |
Zatvorite dodatak ako korisnik klikne negdje izvan dodatka bez odabira datuma. |
{ closeOnWithoutClick: false } |
|
timepicker |
istinito |
Prikaži TimePicker. Može prihvatiti samo lažno ako je datepicker=true |
{ mjerač vremena: lažno } |
|
datepicker |
istinito |
Prikaži DatePicker. Može prihvatiti samo ako je timepicker=true |
{ birač datuma: lažno } |
|
minDate |
false |
Opcija dizajnirana da ograniči donju granicu odabira datuma. Na primjer, naručite taksi i trebate odabrati datum. Očigledno, datum se može odabrati samo počevši od tekućeg dana. Ako je postavljeno na 0, koristit će se trenutni datum. |
{ minDate: 0 } // trenutni datum |
|
maxDate |
false |
Slično kao i minDate, gornja granica datuma. 0 - trenutni datum |
{ maxDate: 0 } // trenutni datum |
|
minTime |
false |
Slično kao minDate, ali za TimePicker |
{ minTime: 0 } // trenutni datum |
|
maxTime |
false |
Slično kao maxDate, ali za TimePicker |
{ maxTime: 0 } // trenutni datum |
|
allowTimes |
[] |
Opcija koja određuje vrijeme dostupno za odabir. Na primjer, odabir autobuske rute može biti dostupan samo u određeno vrijeme. U ovom slučaju, minTime i maxTime vrijednosti se zanemaruju. |
{ allowTimes: ['09:00','11:00','12:00','21:00'] } |
|
otvorena |
false |
Ako je tačno, dodatak će se otvoriti odmah nakon učitavanja stranice |
|
|
U redu |
false |
Kada je istinito, dodatak zamjenjuje <input> |
|
|
onSelectDate |
funkcija(){} |
Poziva se kada je datum odabran u DatePicker-u. Ima 3 parametra. Sam plugin, trenutno vrijeme sa kojim plugin radi i veza do elementa za unos |
onSelectDate: function($dtp,current,input){ |
|
onSelectTime |
funkcija(){} |
Slično onSelectDate za TimePicker |
|
|
onChangeMonth |
funkcija(){} |
Poziva se kada se mjesec promijeni u DatePickeru |
|
|
onChangeTime |
funkcija(){} |
Prilikom pomicanja kroz vrijeme |
|
|
onShow |
funkcija(){} |
Prilikom prikazivanja dodatka |
|
|
onClose |
funkcija(){} |
Prije zatvaranja dodatka |
|
|
bez autorskih prava |
false |
Opcija da za sada onemogućite linkove na stranicu dodataka |
|
|
inverseButton |
false |
Preokreće skrolovanje |
|
|
sati12 |
false |
Format vremena od 12 sati |
|
|
dayOfWeekStart |
0 |
Početak sedmice u DatePickeru. Zadana postavka iz Resurrection je 0. |
|