Kalendarz JQuery (datePicker). JQuery UI API - Datepicker Widget Kalendarz jquery ui datepicker
Witam wszystkich, drodzy czytelnicy Habr!
Ten artykuł dotyczy interfejsu użytkownika jQuery i jego widżetu wyboru daty.
Często zdarza się, że na stronie trzeba wybrać okres (a czasem nawet kilka oddzielnych dat). Jednak Datepicker jQuery UI pozwala wybrać tylko jedną datę w jednym kalendarzu.
Dlatego częstym rozwiązaniem w praktyce jest utworzenie dwóch pól wejściowych z kontrolą typu „od i do”. Można również znaleźć wiele „podstawowych” sposobów rozwiązania tego problemu - to nam nie odpowiada.
Zatem naszym celem jest rozwiązanie problemu przy minimalnym wysiłku przy użyciu wyłącznie narzędzia Datepicker jQuery UI.
Aby rozwiązać ten problem, dostępne jest małe rozszerzenie dla jQuery UI Datepicker, które zwiększa jego standardowe możliwości bez konieczności podłączania widżetów, wtyczek i stylów innych firm.
Dla tych, którzy nie są zainteresowani korzystaniem ze standardowego widgetu $.datepicker() przygotowałem kilka linków, mam nadzieję, że również okażą się przydatne:
Artykuł o Habré (wybór kilku dat, wybór okresu).
- Doskonała wtyczka DateTimePicker firmy XDSoft (wybór okresu daty, wybór godziny i inne różne funkcje), warta obejrzenia
Są inne rozwiązania, ale nie będę się nad nimi rozwodzić. Jeśli macie swoje ulubione kalendarze wyboru daty, chętnie przeczytam o nich w komentarzach do artykułu.
Opis rozszerzenia Rozszerzenie to plik rozszerzający możliwości widżetu $.datepicker() przy użyciu jego modelu obiektowego. Nie wpływa na funkcjonalność Datepicker w trybie domyślnym. Nie musisz się więc martwić, że (już napisany) kod przestanie działać lub będzie działać inaczej.Rozszerzenie umożliwia zmianę zachowania wyboru daty w dwóch trybach:
- Wybierz okres (dwie daty: początek i koniec okresu)
- Wybierz wiele dat (tablica dat)
$("#date_range").datepicker(( zakres: "okres", // możliwe wartości: okres, wielokrotność range_multiple_max: 3, // maksymalna liczba wybranych dat w trybie "Wiele dat" onSelect:function(dateText, inst , rozszerzenieRange ) ( // rozszerzenieRange - dodany argument zwrotny, zawiera obiekt rozszerzenia ) )); // Metoda „setDate” może teraz akceptować tablicę: 2 elementy z zakresem „okres” lub więcej elementów z zakresem „multiple” // $(”#date_range”).datepicker(„setDate”, [”+2d ", "+1w"]); // zaleca się użycie zdarzenia "onSelect" do zmiany wartości pól formularza (lub zmiennych w skrypcie) // jednak dla bardziej elastycznej kontroli można uzyskać obiekt rozszerzenia i pracować z informacjami o wybranym daty var rozszerzenieRange = $("#date_range").datepicker("widget").data("datepickerExtensionRange"); konsola.log(rozszerzenieRange.datesText); // tablica dat (data w formacie używanym w datepicker) console.log(extensionRange.startDateText); // początek okresu (data w formacie używanym w datepicker) console.log(extensionRange.endDateText); // koniec okresu (data w formacie używanym w datepickerze) console.log(extensionRange.dates); // tablica dat (obiekt daty) console.log(extensionRange.startDate); // początek okresu (obiekt daty) console.log(extensionRange.endDate); // koniec okresu (obiekt daty)
Nowe style komórek kalendarza
Selected() /* wybrana data */ .selected-start() /* pierwsza data okresu */ .selected-end() /* ostatnia data okresu */ .first-of-month() /* pierwsza data miesiąca */ .last-of-month() /* ostatni dzień miesiąca */
Na jednej z lekcji dowiedzieliśmy się jak na różne sposoby łączyć bibliotekę jQuery UI. Dziś tematem lekcji będzie widget selektora dat - jQuery UI Datapicker.
Dlaczego ten widget jest potrzebny? Aby zapewnić użytkownikowi kalendarz podczas wpisywania daty, wypełniając formularz, nie musi on zastanawiać się w jakim formacie wpisać daty. Z kolei administrator zasobów otrzymuje dane w tym samym formacie.
Pod tym adresem: https://jqueryui.com/datepicker/ Zobaczysz kilka opcji widżetu datapicker, przyjrzymy się tylko dwóm głównym.
Datepicker jQuery UI - Wyświetl menu miesiąca i rokuPo kliknięciu w pole tekstu wejściowego pojawia się kalendarz z wyborem daty oraz dodatkowe menu z wyborem miesiąca i roku. Opcja z jedną datą sprawdza się na stronach, gdzie klient wskazuje np. datę swojej wizyty.
Kod HTML składa się z pojedynczego znacznika wejściowego z identyfikatorem „datapicker” owiniętego w akapit – znacznika p. Zamiast akapitu dane wejściowe można umieścić w dowolnym elemencie blokowym witryny.
Data:
Kod jQuery należy skopiować (zobacz źródło) i wkleić do swojej witryny, jak w przykładzie. Po wczytaniu drzewa DOM w polu tekstowym otrzymamy element o ID #datapicker i wywołamy metodę .datepicker. Teraz należy przekazać obiekt do metody, w której zostaną opisane dodatkowe ustawienia: zmianaMonth: true, zmianaYear: true . Teraz można wybrać miesiąc i rok z listy rozwijanej; jest to trochę wygodniejsze niż dokonywanie podobnego wyboru za pomocą kalendarza.
$(funkcja() (
$("#datepicker").datepicker((
zmieńMiesiąc: prawda,
zmieńRok: prawda
});
});
Widżet Datapicker z wyborem zakresu dat Zakres dat jest odpowiedni dla witryn z systemem rezerwacji. Użytkownik określa datę początkową w pierwszym kalendarzu i datę końcową w drugim kalendarzu. Utwórzmy dwa wejściowe pola tekstowe z identyfikatorami „od” i „do” oraz dwie etykiety powiązane z ich polami tekstowymi.
Z
Do
Pobieramy element o identyfikatorze #from - pierwsze pole tekstowe i wywołujemy w nim metodę datapicker.
$(funkcja() (
var dateFormat = "mm/dd/rr",
od = $("#od")
.datepicker((
Ustalmy domyślną datę plus jeden tydzień.
Domyślna data: "+1w",
Możliwość zmiany miesiąca za pomocą listy rozwijanej.
ZmieńMiesiąc: prawda,
liczbaMiesięcy: 3 ))
Gdy nastąpi zdarzenie on, czyli użytkownik wybierze coś z rozwijanej listy, wówczas gdy wybrana data ulegnie zmianie, znajdujemy drugi datepicker i ustawiamy datę minimalną równą wybranej.
On("zmień", funkcja() (
to.datepicker("opcja", "minDate", getDate(this));
}),
do = $("#do").datepicker
Zmieniając wybraną datę, znajdujemy pierwszy datepicker i ustawiamy datę maksymalną równą wybranej.
On("zmień", funkcja() (
from.datepicker("opcja", "maxDate", getDate(this));
});
Cały kod i wizualne przykłady wszystkich opcji z różnymi parametrami widżetu jQuery Datapicker znajdują się na stronie jqueryui.com.
Datepicker jQuery UI — lokalizuj kalendarzDomyślnie kalendarz jest wyświetlany w języku angielskim, ale można to zmienić; biblioteka jQuery UI obsługuje wiele języków.
Pobierz wymagany plik językowy na Githubie
Wymagany moduł językowy umieszczamy w tagu head.
Tworzymy pole tekstowe dla kalendarza oraz rozwijaną listę o identyfikatorze „locale” zawierającą wymagane języki.
Data:
język angielski
rosyjski (rosyjski)
Po załadowaniu drzewa DOM poszukaj obiektu datapicker. Zmieniamy ustawienia dla wszystkich datepickerów.
$(funkcja() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);
Zmiana lokalizacji dla "datepicker" .
$("#locale").on("zmień", funkcja() (
Zmień lokalizację podczas wybierania nowej wartości z listy rozwijanej.
$("#datepicker").datepicker("opcja",
$.datepicker.regional[ $(this).val() ]);
Widżet wyboru daty
Artykuł ten dotyczy widżetu Datepicker – wygodnego interaktywnego kalendarza ułatwiającego wprowadzanie dat. Otrzymywanie informacji kalendarza w postaci tekstu od użytkowników zawsze stanowi wyzwanie, ponieważ istnieje wiele różnych formatów wyrażania dat. Widżet Datepicker ułatwia wybór daty i przedstawienie jej w spójny sposób, zmniejszając tym samym prawdopodobieństwo błędów.
Tworzenie widgetu DatepickerIstnieją dwa główne sposoby tworzenia widżetu Datepicker. Najczęstszym sposobem dołączenia go do elementu wejściowego jest użycie metody datepicker(). Nie zmienia to od razu wyglądu elementu, ale gdy tylko element otrzyma fokus wejściowy (klikając na niego lub przechodząc do niego z innych elementów za pomocą klawisza ), obok niego wyświetli się kalendarz, za pomocą którego możesz wybierz żądaną datę.
Kalendarze opisanego typu nazywane są wyskakujące kalendarze. Przykład tworzenia takiego kalendarza znajduje się poniżej:
Dane wejściowe jQuery UI (szerokość: 200 pikseli; wyrównanie tekstu: do lewej) $(function() ( $("#datep").datepicker(); )); Data:
Ilustracja pokazuje, co się stanie, gdy przeniesiesz fokus na pole wejściowe:
Użytkownik może wprowadzić datę ręcznie lub wybrać ją za pomocą kalendarza. Gdy element wejściowy straci fokus lub użytkownik naciśnie klawisz (lub), kalendarz zniknie.
Lokalizacja widżetu DatepickerJak widać, w pokazanym przykładzie kalendarz wyświetlany jest w języku angielskim. Widżet Datepicker jQuery UI zapewnia dość wszechstronną obsługę różnych standardów formatowania daty używanych na całym świecie, w tym 61 opcji lokalizacji. Aby uzyskać do nich dostęp, musisz zaimportować jeden skrypt pomocniczy JavaScript do swojego dokumentu i wskazać widżetowi Datepicker, której opcji lokalizacji ma użyć. Odpowiedni przykład podano poniżej:
... ... $(funkcja() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...
Plik jquery-ui-i18n.js znajduje się w folderze development-bundle/ui/i18n pliku archiwum biblioteki jQuery UI, który powinieneś pobrać z jqueryui.com. Skopiuj go do tego samego folderu, w którym znajduje się plik źródłowy i dodaj go do dokumentu, jak pokazano w kodzie. Wynik pokazano na rysunku:
Drugi sposób wykorzystania widżetu Datepicker polega na osadzeniu go w dokumencie. Aby to zrobić, wybierz element div lub span za pomocą jQuery i wywołaj metodę datepicker(). Wbudowany kalendarz jest wyświetlany tak długo, jak widoczny jest element HTML, na którym jest oparty. Przykład tworzenia wbudowanego kalendarza podano poniżej:
Etykieta interfejsu użytkownika jQuery (margines po prawej: 12 pikseli; ) dane wejściowe (szerokość: 200 pikseli; wyrównanie tekstu: po lewej; margines po prawej stronie: 10 pikseli) #wrapper > * (float: po lewej) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"] )); Data:
W tym przykładzie element span jest używany jako podstawowy element HTML do utworzenia widżetu Datepicker. Wynik pokazano na rysunku:
Wbudowany kalendarz może być przydatny, jeśli nie chcesz pracować z wyskakującymi obiektami. Są oczywiście aplikacje, w których praca z datami jest na tyle intensywna, że warto mieć zawsze pod ręką kalendarz. Jednak w większości przypadków rozsądnie jest pozostawić kalendarz ukryty, dopóki nie będzie potrzebny.
Trudność z ukrywaniem i wyświetlaniem osadzonego widżetu Datepicker polega na tym, że dodanie go do dokumentu wymaga zmiany układu strony, co może powodować problemy z prezentacją. Z mojego punktu widzenia w większości sytuacji znacznie wygodniej jest skorzystać z wyskakującego widgetu.
Konfigurowanie widżetu DatepickerJeśli miałeś już do czynienia z przetwarzaniem danych, to doskonale wiesz, jak trudna jest praca z tą kategorią danych. Odzwierciedleniem tej złożoności jest różnorodność właściwości obsługiwanych przez widżet Datepicker. Poniższe sekcje poświęcone są opisowi grup powiązanych właściwości, z którymi skonfigurowany jest ten widget.
Podstawowe ustawieniaDo skonfigurowania podstawowych właściwości kalendarzy wyskakujących i osadzonych służy kilka opcji konfiguracyjnych. Te właściwości są bardzo ważne, ponieważ pozwalają kontrolować sposób integracji widgetu z dokumentem. Ich listę przedstawiono w poniższej tabeli:
| altPole | Umożliwia określenie dodatkowego pola, które będzie aktualizowane po wybraniu daty w kalendarzu |
| przyciskTylko obraz | Określa, że do otwarcia kalendarza powinien być używany obraz określony w opcji ButtonImage zamiast dodatkowego przycisku. |
| przyciskObraz | Definiuje adres URL obrazu używanego dla dodatkowego przycisku otwierania kalendarza wyskakującego. Nieużywany domyślnie |
| Przycisk tekstowy | Określa tekst, który będzie wyświetlany na przycisku otwierania wyskakującego kalendarza. Domyślnym tekstem jest wielokropek (...) |
| domyślna data | Umożliwia ustawienie daty, która będzie podświetlana po otwarciu kalendarza |
| wyłączony | Wskazuje, czy widget powinien być początkowo wyłączony. Wartość domyślna to fałsz |
| Pokaż | Określa akcję, która powoduje otwarcie wyskakującego kalendarza. Wartość domyślna to fokus |
Najprostsze ustawienie jest również najbardziej przydatne. Korzystając z opcji defaultDate, możesz określić datę, która będzie automatycznie podświetlana po otwarciu kalendarza.
Jeśli opcja defaultDate nie jest ustawiona, zamiast niej używana jest bieżąca data. (Oczywiście odnosi się to do daty ustawionej w systemie użytkownika. Strefy czasowe, czas letni lub błędna konfiguracja mogą spowodować, że data wyświetlana użytkownikowi będzie inna niż oczekiwana. )
Ta opcja jest używana tylko wtedy, gdy w elemencie wejściowym nie ma atrybutu wartości. Jeżeli ten atrybut występuje (niezależnie od tego, czy został on uwzględniony w dokumencie przez Ciebie, czy też jest wynikiem wstępnego wyboru przez użytkownika), wówczas widget Datepicker wykorzysta jego wartość.
Jeżeli chcesz, aby kalendarz otwierał się z inną datą początkową, możesz ją ustawić korzystając z jednej z metod opisanych w poniższej tabeli:
| zero | Używana jest bieżąca data |
| Obiekt daty | Używa wartości reprezentowanej jako obiekt JavaScript Date |
| +dni, -dni | Używa daty różniącej się od daty bieżącej o określoną liczbę dni. Zatem +3 oznacza datę, która nastąpi trzy dni po bieżącej, a -2 oznacza datę dwa dni wcześniej |
| +1d +7w -1m +1r | Stosowana jest data mierzona od daty bieżącej i wyrażana w postaci liczby dni (d), tygodni (w), miesięcy (m) i lat (y), które określają, o ile data jest przesunięta do przodu (+) lub wstecz (-) w czasie. Dopuszczalne jest mieszanie wartości dodatnich i ujemnych w jednej dacie. Na przykład kombinacja wartości -1d +1m, użyta w połączeniu z datą 12 listopada 2011 r., odpowiada 11 grudnia 2011 r. |
Poniżej podano przykład użycia opcji defauitDate do określenia daty przypadającej za pięć lat:
$(funkcja() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((data domyślna: "+5y" )); ));
Załóżmy, że aktualną datą jest grudzień 2013 roku. Wówczas, jak pokazano na poniższym rysunku, data wyznaczona wartością opcji defauitDate odpowiada grudniu 2018 roku:
Z opisanym formatem możesz spotkać się przy wielokrotnym wskazywaniu dat względnych. Jest to bardzo elastyczny format zapewniający niezbędną dokładność. W ten sam sposób jak w przykładzie możesz pominąć dowolny interwał, którego nie zamierzasz zmieniać. Na przykład zamiast wartości „+0d +0w +0m +5y” całkiem możliwe jest użycie wartości „+5y”. Zaletą tego formatu jest to, że pozwala mieszać wartości dodatnie i ujemne dla różnych odstępów czasu, co pozwala dokładnie określić żądaną datę.
Zdefiniowanie zdarzenia, które powoduje otwarcie wyskakującego kalendarzaOpcja showOn pozwala kontrolować wydarzenie, w odpowiedzi na które ma zostać wyświetlony wyskakujący kalendarz. Opcja ta może przyjmować jedną z trzech wartości:
centrumWyskakujący kalendarz otwiera się, gdy element wejściowy zostanie aktywowany. Jest to wartość domyślna.
przyciskWyskakujący kalendarz otwiera się po kliknięciu przycisku.
ZarównoWyskakujący kalendarz pojawia się zarówno po kliknięciu przycisku, jak i po zaznaczeniu elementu wejściowego.
Jeśli użyjesz przycisku lub obu wartości, widżet Datepicker utworzy element przycisku i umieści go w dokumencie bezpośrednio po elemencie wejściowym. Poniżej podano przykład użycia opcji showOn:
$(funkcja() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "oba" )); ));
Jak pokazano na rysunku, w dokumencie pojawił się przycisk. Ponieważ w tym przykładzie opcja showOn jest ustawiona na obie, wyskakujący kalendarz będzie wyświetlany zarówno po kliknięciu przycisku, jak i po zaznaczeniu elementu wejściowego.
Przycisk dodany przez widżet Datepicker nie jest widżetem przycisku jQuery UI. Jeśli chcesz, aby wszystkie przyciski były tego samego typu, wybierz element przycisku i wywołaj metodę przycisku() jQuery UI.
Element przycisku można stylizować za pomocą opcji ButtonImage i ButtonText. Jeśli ustawisz opcję ButtonImage na adres URL obrazu, widżet Datepicker umieści ten obraz na przycisku. Dodatkowo domyślny tekst powiązany z przyciskiem (wielokropek) można zastąpić innym tekstem za pomocą opcji ButtonText, jak pokazano w poniższym przykładzie:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "oba", przyciskText: "Wybierz" )); ) );
Używając jednocześnie opcji ButtonImage i ButtonImageOnly, możesz całkowicie pozbyć się przycisku, zastępując go obrazem. Odpowiedni przykład podano poniżej:
Etykieta jQuery UI (margines po prawej: 12 pikseli) dane wejściowe (szerokość: 200 pikseli; wyrównanie tekstu: do lewej) #dpcontainer * (wyrównanie w pionie: środek) #dpcontainer img (szerokość: 35 pikseli;) $(funkcja() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "oba", ButtonImage: "right.png", ButtonImageOnly: true )); Data:
Ten przykład ustawia obraz na Right.png i ustawia opcję ButtonImageOnly na true. Ponadto do dokumentu dodano kilka stylów CSS w celu kontrolowania położenia obrazu względem etykiety i elementów wejściowych. Widżet Datepicker nie może dokładnie określić, gdzie umieścić element img, dlatego konieczne było zastosowanie stylów CSS, aby prawidłowo umieścić element img w dokumencie. Wynik użycia obrazu zamiast przycisku pokazano na rysunku:
Celem widżetu Datepicker jest umożliwienie użytkownikowi wybrania daty, ale w wielu przypadkach należy nałożyć pewne ograniczenia na ten proces. Poniższa tabela opisuje ustawienia umożliwiające ustawienie ograniczeń wymuszających na użytkowniku wybranie tylko prawidłowych dat:
| zmieńmiesiąc | Jeśli ta opcja jest włączona, w kalendarzu wyświetlana jest lista rozwijana, która umożliwia bezpośrednią nawigację według miesięcy. Wartość domyślna to fałsz |
| zmień rok | Jeśli ta opcja jest włączona, w kalendarzu wyświetlana jest lista rozwijana, która umożliwia bezpośrednią nawigację według roku. Wartość domyślna to fałsz |
| ogranicz wejście | Jeśli ta opcja jest włączona, widżet Datepicker sprawdza, czy zawartość pola wejściowego jest zgodna z określonym formatem daty. Wartość domyślna to true |
| ukryjJeśliNiePoprzedniNastępny | Jeśli ta opcja jest włączona, ikony umożliwiające poruszanie się do przodu i do tyłu w kalendarzu względem wyświetlanej daty są całkowicie ukryte, a nie po prostu wyłączone. Wartość domyślna to fałsz |
| maxData | Określa maksymalną datę dostępną do wyboru. Domyślnie nie ma żadnych ograniczeń |
| minData | Określa minimalną datę dostępną do wyboru. Domyślnie nie ma żadnych ograniczeń |
| liczbaMiesięcy | Określa liczbę miesięcy wyświetlanych jednocześnie w kalendarzu. Wartość domyślna to 1 |
| pokażCurrentAtPos | Jeśli kalendarz jest ustawiony na wyświetlanie wielu miesięcy jednocześnie, opcja ta określa numer pozycji, w której powinien być wyświetlany miesiąc bieżący lub domyślny. Wartość domyślna to 0 |
| krokMiesiące | Określa, o ile miesięcy do przodu lub do tyłu ma zostać przesunięta data kalendarzowa po kliknięciu przycisku czasu do przodu lub do tyłu |
| rokZakres | Określa zakres lat dostępnych do wyboru z listy rozwijanej dodawanej za pomocą opcji zmieńRok. Domyślnie lista ta obejmuje poprzednie dziesięć lat, następne dziesięć lat i bieżący rok. |
Ustawiając opcję constrainInput na true, można ograniczyć wprowadzanie znaków w polu tekstowym tylko do tych znaków, które odpowiadają ściśle określonemu formatowi. Dozwolony zestaw znaków jest określony na podstawie ustawień lokalizacji omówionych powyżej. Jeśli widżet Datepicker nie został zlokalizowany, można się spodziewać, że dozwolone znaki będą zawierać tylko cyfry i znak ukośnika (/).
Użycie określonej wartości opcji constrainInput nie oznacza, że użytkownik nie będzie mógł wprowadzić nieprawidłowej daty, np. 99/99/99, ale znacznie zmniejsza prawdopodobieństwo błędów. To ustawienie jest jeszcze ważniejsze, jeśli opcja showOn jest ustawiona na przycisk, ponieważ wówczas wyskakujący kalendarz nie otworzy się automatycznie, gdy pole wejściowe zostanie aktywne.
Użytkownicy na ogół chętnie korzystają z kalendarza do wybierania daty, ale w tym celu muszą go zobaczyć. Jeśli kalendarz nie wyświetli się na ekranie, to nie każdy użytkownik zorientuje się, że aby otworzyć kalendarz wystarczy kliknąć na przycisk. Każda opcja umożliwiająca użytkownikowi bezpośrednie wprowadzenie daty w polu tekstowym zwiększa prawdopodobieństwo, że format wprowadzonej daty będzie nieprawidłowy. Poniżej podano przykład użycia opcji constrainInput:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));
Tutaj wartość true jest przypisana do opcji constrainInput tylko dla przejrzystości, ponieważ jest to wartość domyślna dla tej opcji. Pozostałe dwie opcje pozwalają ograniczyć zakres dat dostępnych do wyboru do daty minimalnej i maksymalnej.
Podobnie jak w przypadku omówionej wcześniej opcji defaultDate, wartości opcji minDate i maxDate mogą mieć wartość null (niezdefiniowana data), obiekt JavaScript Date, liczbę dni i względny ciąg znaków daty. W tym przykładzie wybrano reprezentację numeryczną, aby wskazać liczbę dni w stosunku do bieżącej daty.
Na rysunku widać, że Datepicker wyłącza komórki kalendarza, których nie można wybrać:
Należy pamiętać, że przyciski miesiąca są automatycznie wyłączane, jeśli nie są potrzebne. Przyciski te znajdują się w lewym i prawym górnym rogu kalendarza i pozwalają szybko przejść do następnego lub poprzedniego miesiąca. Jak pokazano na rysunku, wszystkie możliwe do wyboru daty przypadają w bieżącym miesiącu, dlatego oba przyciski są wyłączone. W takich sytuacjach przyciski te można w razie potrzeby całkowicie ukryć, ustawiając opcję hideIfNoPrevNext na wartość true.
Wartość minDate nie musi być w przeszłości, a wartość maxDate w przyszłości, nie muszą też być obiema wartościami jednocześnie. Aby umożliwić użytkownikowi wybór dat z zakresu poprzedzonego okresem „przygotowawczym”, można ustawić opcję minDate na wartość w przyszłości, uniemożliwiając użytkownikowi w ten sposób wybór dat z tego okresu, jak pokazano w przykładzie poniżej :
$(funkcja() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))
W tym przykładzie określiliśmy, że użytkownik nie powinien mieć możliwości wyboru dat wcześniejszych niż 4 dni po bieżącej dacie. Opcja maxDate jest niezdefiniowana, co oznacza, że użytkownik będzie mógł wybrać dowolną datę po upływie określonego „okresu opóźnienia”. Wynik pokazano na rysunku:
Należy pamiętać, że w tej sytuacji przycisk następnego miesiąca jest włączony, natomiast przycisk poprzedniego miesiąca jest wyłączony (ze względu na brak dostępnych dla użytkownika dat z przeszłości).
Opcje minDate i maxDate działają w połączeniu z opcją defaultDate, co oznacza, że powiązanie zakresów z bieżącą datą jest opcjonalne.
Utwórz kalendarz wyświetlający wiele miesięcy jednocześnieWidżet Datepicker umożliwia ustawienie liczby miesięcy, które mają być jednocześnie wyświetlane w kalendarzu za pomocą opcji numberOfMonths. Można to zrobić podając wymaganą liczbę miesięcy lub tablicę dwóch elementów określających wymiary siatki kalendarza miesięcznego.
Poniższy przykład implementuje podejście oparte na tablicach, które moim zdaniem najlepiej pasuje do wbudowanych widżetów Datepicker, ponieważ rozmiar siatki jest często zbyt duży dla widżetów wyskakujących (powrócimy do tego później).
$(funkcja() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((numberOfMonths: )); ));
W tym przykładzie określono siatkę kalendarza o wysokości jednego miesiąca i szerokości trzech miesięcy. Wynik pokazano na rysunku:
Tablica dwóch elementów jest równoważna wartości liczbowej 3. Jeżeli wartość opcji numberOfMonths zostanie podana jako liczba, wówczas widget wyświetli odpowiednią liczbę miesięcy w jednym wierszu.
Powodem, dla którego rzadko korzystam z tego podejścia podczas pracy z kalendarzami wyskakującymi, jest to, że w przypadku dużych siatek należy przyjąć pewne założenia dotyczące rozmiarów okien przeglądarki i wyświetlaczy. Wyskakujące okno widżetu Datepicker nie jest oknem dialogowym systemu operacyjnego. Jest to sprytnie zaprojektowany element HTML, który pojawia się jako część dokumentu HTML. Oznacza to, że gdy na małym ekranie lub w małym oknie przeglądarki wyświetlane są duże siatki kalendarza, większość pozostałych informacji zawartych w dokumencie pojawi się poza ekranem.
Zapewnienie bezpośredniego dostępu do miesięcy i latZamiast po prostu wyświetlać miesiące i lata w nagłówku kalendarza, możesz zapewnić bezpośredni dostęp do odpowiednich okresów za pomocą list rozwijanych. Ta funkcja zapewnia szybkość, gdy użytkownicy muszą wybierać daty z szerokiego zakresu możliwych dat, i jest realizowana przy użyciu opcji zmianyMonth i ChangeYear.
Ustawienie dowolnej z tych opcji na wartość true spowoduje włączenie odpowiedniej listy rozwijanej i będziesz mógł niezależnie kontrolować, czy listy są włączone. Przykład użycia tych opcji podano poniżej:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( zmianaMiesiąc: prawda, zmianaRok: prawda, zakres roku: "-1:+ 2" )); ));
W tym scenariuszu włączone są obie listy rozwijane. Ponadto opcja yearRange służy do ograniczenia zakresu lat, pomiędzy którymi użytkownik może się zmieniać. Wymagany zakres określa się za pomocą wartości „-1:+2”, co oznacza, że kalendarz umożliwia użytkownikowi poruszanie się w zakresie jednego roku wstecz i dwóch lat do przodu od roku bieżącego.
Listy rozwijane i określony zakres lat pokazano na rysunku:
Definiując zakresy lat, można użyć opcji yearRange, aby określić rzeczywiste lata. Zatem w tym przykładzie można określić wartość: „2012:2015”.
Kontrolowanie wyglądu widżetu DatepickerIstnieje wiele właściwości, które umożliwiają dostosowanie wyglądu widżetu Datepicker wyświetlanego użytkownikowi. W przypadku typowych zadań związanych z wybieraniem dat możesz zadowolić się domyślnym wyglądem kalendarza, który znasz już z poprzednich przykładów, ale niezwykle przydatna jest możliwość dostosowania wyglądu do potrzeb konkretnej aplikacji internetowej.
Właściwości umożliwiające zmianę wyglądu widżetu Datepicker przedstawia poniższa tabela:
| dołączTekst | Określa tekst podpowiedzi zawierający dodatkowe informacje, takie jak wyjaśnienie formatowania daty, które zostaną wstawione do dokumentu po elemencie wejściowym |
| zamknijTekst | Ustawia tekst przycisku zamykania kalendarza, który pojawia się na pasku przycisków pomocniczych, gdy jest on włączony. Wartość domyślna to „Zamknij” |
| bieżący tekst | Ustawia tekst przycisku powrotu do bieżącego miesiąca, który pojawia się na pasku przycisków pomocniczych, gdy jest włączony. Wartość domyślna to „Dzisiaj” |
| czas trwania | Ustawia prędkość lub czas trwania animacji określony przez opcję showAnim. Wartość domyślna jest normalna |
| gotoCurrent | Jeśli ta opcja jest włączona, przycisk Dzisiaj znajdujący się na pasku przycisków pomocniczych, jeśli jest włączony, spowoduje powrót do wybranej daty, a nie do daty bieżącej. Wartość domyślna to fałsz |
| wybierz Inne miesiące | Jeżeli opcja ta ma wartość true, to daty wyświetlane w wyniku ustawienia opcji showOtherMonths na wartość true stają się dostępne do wyboru. |
| pokażAnim | Określa typ animacji używanej do pokazywania i ukrywania wyskakujących kalendarzy. Wartość domyślna to fałsz |
| pokażPanel Przycisków | Jeżeli ta opcja jest włączona, w kalendarzu wyświetli się panel pomocniczy z przyciskami pozwalającymi na przejście do aktualnej daty oraz (w przypadku zastosowania widgetu pop-up) zamknięcie kalendarza. Wartość domyślna to fałsz |
| pokażOpcje | Ustawia opcje animacji określone przez opcję showAnim |
| pokażInneMiesiące | Jeżeli ta opcja jest włączona, puste pola w siatce kalendarza zostaną wypełnione datami z poprzednich i kolejnych miesięcy. Wartość domyślna to fałsz |
| tydzień pokazowy | Jeżeli ta opcja jest włączona, w kalendarzu zostanie wyświetlona kolumna z numerami tygodni. Wartość domyślna to fałsz |
| nagłówek tygodnia | Określa tytuł kolumny kalendarza z numerami tygodni włączonymi przez opcję showWeek. Wartość domyślna to „środa” |
W niektórych zastosowaniach istotna jest znajomość numeru tygodnia w roku, w którym przypada dana data. Jest to na przykład wymagane w wielu programach księgowych. W widżecie Datepicker możesz sterować wyświetlaniem informacji tygodniowych za pomocą opcji showWeek i WeekHeader, jak pokazano w poniższym przykładzie:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, WeekHeader: "Nr tygodnia" )); ) ) ;
Jeżeli opcja showWeek ma wartość true, w kalendarzu wyświetlana jest kolumna z numerami tygodni. Domyślnym nagłówkiem tej kolumny jest „Tydzień”, ale można go zmienić za pomocą opcji WeekHeader. Przykład pokazuje kolumnę tygodni, której nazwa została zmieniona na „Tydzień #”:
Domyślnie kalendarz wyświetla tylko daty przypadające w bieżącym miesiącu. Oznacza to, że w siatce kalendarza mogą znajdować się puste komórki. Możesz zezwolić na wypełnianie pustych komórek datami z poprzedniego i kolejnych miesięcy, ustawiając opcję showOtherMonths na true, jak pokazano w poniższym przykładzie:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));
Wynik pokazano na poniższym rysunku. W tym przypadku daty należące do innych miesięcy stają się dostępne, jeśli opcjaselectOtherMonths jest ustawiona na true:
Ustawienie opcji showButtonBar na true powoduje dodanie paska dodatkowych przycisków na dole okna widżetu Datepicker. W przypadku kalendarza wyskakującego na panelu znajdują się dwa przyciski: „Dzisiaj” i „Zamknij”. Przycisk Dzisiaj umożliwia powrót do aktualnej daty, a przycisk Zamknij zamyka okno kalendarza. Tekst używany dla tych przycisków można zmienić za pomocą opcji currentText i CloseText.
Jeśli opcja goToCurrent jest ustawiona na true, kalendarz powróci do wybranej daty, a nie do daty bieżącej. Ta funkcja jest przydatna, jeśli widżet Datepicker jest skonfigurowany z określoną wartością opcji defaultDate. Jeżeli cel wyboru daty jest związany z wydarzeniami przeszłymi lub przyszłymi, to powrót do daty bieżącej nie zawsze jest właściwy. Odpowiedni przykład podano poniżej:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate : "+1m +1y" )).val("20.12.2014" ));
Należy pamiętać, że użycie opcji goToCurrent powoduje, że naciśnięcie przycisku powoduje przeskok do wybranej daty. W tym przykładzie wybrana data jest atrybutem wartości elementu wejściowego, ale jeśli użytkownik wybierze inną datę, a następnie ponownie otworzy kalendarz, kliknięcie przycisku spowoduje powrót w kalendarzu do daty wybranej przez użytkownika, a nie do daty określonej przez Ciebie.
Metody obsługiwane przez widżet Datepicker wymieniono w poniższej tabeli:
| datepicker("zniszcz") | Całkowicie usuwa funkcjonalność widżetu Datepicker z elementu podstawowego |
| datepicker("wyłącz") | Wstrzymuje widżet Datepicker dla elementu bazowego |
| datepicker("włącz") | Wznawia wcześniej wstrzymany widżet Datepicker dla elementu bazowego |
| datepicker("opcja", opcje) | Umożliwia pobranie lub ustawienie wartości jednej lub większej liczby opcji widżetu Datepicker |
| datepicker("jest wyłączony") | Zwraca wartość true, jeśli widżet Datepicker jest wyłączony |
| datepicker("ukryj") | Ukrywa wyskakujący kalendarz, jeśli jest widoczny |
| datepicker("pokaż") | Wyświetla wyskakujący kalendarz, jeśli jest niewidoczny |
| datepicker("odśwież") | Aktualizuje kalendarz, aby odzwierciedlić zmiany wprowadzone w elemencie bazowym |
| datepicker("getDate") | Pobiera datę wybraną w kalendarzu |
| datepicker("setDate", data) | Ustawia określoną wartość jako wybraną datę kalendarzową |
Metody getDate i setDate używam najczęściej wtedy, gdy chcę dać użytkownikom możliwość wybierania całych zakresów dat przy użyciu wielu widżetów Datepicker. Wolę w takich sytuacjach nie wyświetlać wybranych dat w polach tekstowych i wyświetlać jedynie liczbę dni pomiędzy określonymi datami granicznymi. Odpowiedni przykład podano poniżej:
Etykieta interfejsu użytkownika jQuery (margines: 12 pikseli) dane wejściowe (szerokość: 200 pikseli; wyrównanie tekstu: do lewej) #wrapper > * (float: po lewej) #result (margines: automatyczny; dopełnienie: 10 pikseli; szerokość: 200 pikseli; wyczyść: po lewej) $( funkcja() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d", maxDate: "+7d", onSelect: funkcja(data, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date) . datepicker("enable").datepicker("opcja", "minDate", data) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); diff).parent().show() ; ) )).filter("#dataKoniec").datepicker("wyłącz" )); Początek: Koniec: Liczba dni:
W tym przykładzie tworzone są dwa kalendarze, z których jeden jest wyłączony natychmiast po załadowaniu dokumentu. Aby odpowiedzieć na wybór dat przez użytkownika, wykorzystywane jest zdarzenie onSelect (o którym szerzej porozmawiamy później).
Gdy użytkownik wybierze datę w pierwszym kalendarzu, za pomocą metody setDate przygotowujemy drugi kalendarz, a metodą getDate pobieramy daty z obu kalendarzy, a następnie obliczamy różnicę w dniach pomiędzy pierwszą i drugą datą (dla uproszczenia założyć, że obie daty pochodzą z tego samego i tego samego miesiąca). Widok dokumentu w oknie przeglądarki przedstawia rysunek:
Podobnie jak wszystkie widżety interfejsu użytkownika jQuery, widżet Datepicker obsługuje zestaw zdarzeń, które umożliwiają powiadamianie o ważnych zmianach w stanie aplikacji. Zdarzenia te przedstawiono w poniższej tabeli:
Nie będę ponownie demonstrował działania metody onSelect, ponieważ została ona już użyta w kilku przykładach, w tym w tym omówionym w poprzedniej sekcji. Jedyną rzeczą, na którą chcę zwrócić uwagę, jest to, że argumenty przekazywane do procedury obsługi zdarzeń są reprezentacją ciągów wybranej daty i instancji Datepicker, która wywołała zdarzenie.
Zdarzenie onChangeMonth pozwala odpowiedzieć na zdarzenie, które ma miejsce w momencie, gdy użytkownik wybierze inny miesiąc lub rok, czy to poprzez listy rozwijane włączane za pomocą opcji ChangeMonth i ChangeYear lub przycisków strony miesiąca.
Za pomocą metody onClose możesz odpowiedzieć na zamknięcie wyskakującego kalendarza. To zdarzenie jest uruchamiane nawet jeśli użytkownik nie wybrał daty w kalendarzu. Argumentami procedury obsługi zdarzeń są ciąg znaków reprezentujący datę (lub ciąg pusty, jeśli użytkownik zamknął okno bez dokonywania wyboru) i instancja Datepicker, która wywołała zdarzenie.
Opis: Z wyskakującego okna lub wbudowanego kalendarza, aby wybrać datę.
Nowa wersja: 1.0
Datepicker interfejsu użytkownika JQuery Wybierz datę, aby dodać wysokość strony w celu dostosowania wtyczki. Możesz dostosować format daty i język, ograniczyć wybór zakresu dat, dodać przyciski i inne opcje nawigacji.
Domyślnie, gdy aktywne jest powiązane pole tekstowe, pojawia się mała otwarta nakładka selektora dat. W przypadku kalendarza online wystarczy wybrać datę dołączoną do DIV lub interwału.
interakcja z klawiaturąGdy selektor dat jest otwarty, dostępne są następujące polecenia klawiaturowe:
- PAGE UP: Przejdź do poprzedniego miesiąca.
- PAGE DOWN: Przejdź do następnego miesiąca.
- CTRL + PAGE UP: Przejdź do poprzedniego roku.
- CTRL + PAGE DOWN: Przejdź do następnego roku.
- CTRL + HOME: Przesuń bieżący miesiąc. Jeśli selektor daty jest zamknięty, jest otwarty.
- CTRL + LEWO: Przejdź do dnia.
- CTRL + PRAWO: Przejdź do następnego dnia.
- CTRL + W GÓRĘ: Przejdź do poprzedniego tygodnia.
- CTRL + DÓŁ: Przejdź do następnego tygodnia.
- ENTER: Wybierz datę skupienia.
- CTRL + END: Zamknij selektor dat i wyczyść datę.
- ESCAPE: Data zamknięcia kranu, bez wyboru.
Zmień ustawienia domyślne dla wszystkich selektorów dat.
20.08.2012 Romczik
Dobry dzień. Któregoś dnia napotkałem problem - użytkownik musi podać na wejściu datę w określonym formacie. Nie zastanawiając się długo, zdecydowałem się upewnić, że po kliknięciu wejścia pojawi się kalendarz. Nie jest to trudne do wdrożenia, ale dlaczego? Jeśli istnieje wspaniały widget kalendarza jQuery - datepicker. Następnie porozmawiamy o instalowaniu, konfigurowaniu i podłączaniu datepickera.
Najpierw podam jasny przykład tego, co chcę zrobić:
Otóż jasne jest, że po wybraniu daty kalendarz znika, a wybrana data pojawia się w polu tekstowym.
Zacznijmy wdrażanie.
Przejdź do oficjalnej strony jQueryUI. Aby uniknąć pobierania czegokolwiek niepotrzebnego, kliknij „Odznacz wszystkie komponenty”
I wybierz „Rdzeń”:
To w zasadzie wszystko. Ale ten widget ma wstępnie ustawione wyświetlacze (motywy)
W prawym górnym rogu możesz wybrać odpowiedni motyw, wybrać wersję widgetu i kliknąć „Pobierz”:
W kolejnym etapie rozpakuj archiwum.
Od razu uzgodnijmy strukturę naszej strony:
Teraz umieszczamy pliki jquery-1.8.0.min.js i jquery-ui-1.8.23.custom.min.js z pobranego archiwum do folderu js. Teraz umieszczamy folder z nazwą motywu datepicker (w moim przypadku jest to ui-lightness) z folderu css pobranego archiwum do folderu css naszej strony. To kończy instalację widżetu kalendarza jQuery Datepicker.
Zacznijmy łączyć Datepicker. Jak już mówiłem, chcę wywołać kalendarz po kliknięciu pola tekstowego. Dodajmy id=”datepicker” do naszych danych wejściowych, abyśmy mieli do nich łatwy dostęp.
Napiszmy teraz mały skrypt jQuery, który wywoła kalendarz po kliknięciu tego pola testowego:
$(funkcja())( $("#datepicker").datepicker(); ));
Zapisujemy i sprawdzamy.
Konfigurowanie widżetu kalendarza przy użyciu jQuery Datepicker.Pierwszą rzeczą, którą ustalimy, będzie motyw naszego kalendarza. Poniżej podam tabelę z nazwą motywu Datepicker i jego wyświetlaniem:
| Lekkość interfejsu | |
| Ciemność interfejsu | |
| Gładkość | |
| Początek | |
| Redmond | |
| Słoneczny | |
| Pochmurny | |
| Le Żaba | |
| Trzepnięcie | |
| Młynek do pieprzu | |
| Bakłażan | |
| Ciemny Ul | |
| Cupertino | |
| ulica Południowa | |
| Blitzer | |
| Ludzkość | |
| Gorące zakradanie | |
| Ekscytujący rower | |
| Vadera | |
| Lubie kropkę | |
| Miętowy Chock | |
| Czarna herbata | |
| Trontastyczny | |
| Elegancka torebka |
Jak widać motywów jest wystarczająco dużo, aby wybrać ten właściwy, jeśli jednak z jakiegoś powodu nie znalazłeś takiego motywu, możesz łatwo zmienić jeden ze standardowych, zmieniając plik stylu dla datepickera.
Na tym nie kończą się ustawienia datepickera, wywołując funkcję datepicker możemy przekazać dodatkowe parametry:
| Parametr | Opis | Przykład |
| wyłącz: prawda (fałsz) Wartość domyślna: fałsz | Włącz lub wyłącz datepicker | $(“.selector”).datepicker((wyłączone: true )); |
| altPole Wartość domyślna: pusta | Określa selektor elementu, który zostanie zaktualizowany | $(“.selector”).datepicker(( altField: “#actualDate” )); |
| altFormat Wartość domyślna: pusta | dateFormat - format daty stosowany w polu altField | $(“.selector”).datepicker(( altFormat: “rr-mm-dd” )); |
| dołączTex Wartość domyślna: pusta | Tekst wyświetlany po każdym polu daty | $(“.selector”).datepicker(( appendText: “(rrrr-mm-dd)” )); |
| autoSize: prawda (fałsz) Wartość domyślna: fałsz | Automatyczny rozmiar elementu | $(“.selector”).datepicker(( autoSize: true )); |
| format daty: Wartość domyślna: mm/dd/rr W poniższej tabeli pokażę jakie wartości może przyjmować. | Określa format daty | $(“.selector”).datepicker(( dateFormat: “rr-mm-dd” )); |
| nazwy dnia Domyślny ["Niedziela poniedziałek wtorek środa czwartek piątek sobota"] | Pełne nazwy dni tygodnia | $(“.selector”).datepicker(( dayNames: [„poniedziałek”, „wtorek”, „środa”, „czwartek”, „piątek”, „sobota”, „niedziela”] )); |
| dzieńNazwyMin Domyślny: [„Nie”, „Mo”, „Wt”, „My”, „Cz”, „Pt”, „Sa”] | Skrót dni tygodnia | $(„.selector”).datepicker(( dayNamesMin: [„Pon”, „Wt”, „Środa”, „Czw”, „Piątek”, „Sob”, „Niedziela”] )); |
| dzieńNazwyShort Domyślny: [„nie”, „poniedziałek”, „wtorek”, „środa”, „czw”, „piątek”, „sobota”] | Skrócone nazwy dni tygodnia | $(“.selector”).datepicker(( dayNamesShort: [„Pon”, „Wt”, „Środa”, „Czw”, „Piątek”, „Sob”, „Niedziela”] )); |
| domyślna data Wartość domyślna: pusta Używa parametrów dateFormat jako parametrów | Określa domyślną datę | $(“.selector”).datepicker((data domyślna: +7 )); |
| miesiąceNazwy Domyślny: [„styczeń”, „luty”, „marzec”, „kwiecień”, „maj”, „czerwiec”, „lipiec”, „sierpień”, „wrzesień”, „październik”, „listopad”, „grudzień”] | Pełne nazwy miesięcy | $(“.selector”).datepicker(( nazwy miesiąca: [„styczeń”, „luty”, „marzec”, „kwiecień”, „maj”, „czerwiec”, „lipiec”, „sierpień”, „wrzesień”, "Październik listopad grudzień"] )); |
| miesiącNazwyShort Domyślny [„styczeń”, „luty”, „marzec”, „kwiecień”, „maj”, „czerwiec”, „lipiec”, „sierpień”, „wrzesień”, „październik”, „listopad”, „grudzień”] | Skrócone nazwy miesięcy | $(„.selector”).datepicker((monthNamesShort: [„sty”, „luty”, „mar”, „kwiecień”, „maj”, „czerwiec”, „lip”, „sierpień”, „wrzesień”, „październik”, „listopad”, „grudzień”] )); |
Tutaj podałem jedynie podstawowe parametry, które mogą Ci się przydać. Jeśli chcesz zobaczyć pełną listę parametrów, przejdź do oficjalnej dokumentacji
Przyjrzyjmy się teraz wartościom, jakie przyjmuje parametr dateFormat
To tyle.
Przyjrzeliśmy się instalacji, podłączeniu i konfiguracji jednego ze wspaniałych widżetów jQuery - widżetu kalendarza datepicker.
Mam nadzieję, że spodobał Ci się artykuł. Jeśli masz jakieś pytania, napisz w komentarzach.
I tym żegnam Cię i udanego tworzenia stron internetowych.