Praca z kontrolką wyboru daty i czasu
Kurs Industrial Graphics w oprogramowaniu AVEVA, odc. 17
Kontakt w sprawie artykułu: Mateusz Zajchowski - 2026-06-25
Drugą kontrolką przeznaczoną do obsługi daty jest DateTime Picker.
Kurs projektowania symboli Industrial Graphics w oprogramowaniu wizualizacyjnym AVEVA
1. Wprowadzenie do Industrial GraphicsAby ją dodać do symbolu, wybieramy narzędzie DateTime Picker z panelu Tools, a następnie klikamy i przeciągamy kursor myszy w obszarze roboczym.
Umieszczony element można skalować oraz obracać na pomocą standardowych elementów kontrolnych.
Aby skonfigurować kontrolkę, klikamy dwukrotnie, po czym otwiera się dobrze nam znane okno Edit Animations. Łatwo zauważymy, że w górnej części wygląda ono identycznie, jak w przypadku innych kontrolek. W polu DateTime Value wprowadzamy referencję do zmiennej, która będzie przechowywała datę – w naszym przykładzie będzie to zmienna Selection. Działanie opcji Submit Value Changes znamy już z poprzednich odcinków.
W obszarze Configuration widzimy kilka opcji. Pole Format umożliwia zmianę formatu czasu:
- Long – długi format daty w postaci „dddd, MMMM d, yyyy” (dzień tygodnia, miesiąc dzień, rok).
- Short – krótki format daty w postaci „M/d/yyyy” (miesiąc/dzień/rok).
- Time – tylko czas w postaci „h:mm tt” (godzina : minuta AM/PM), bez informacji o dacie.
- Custom – własne ustawienia skonfigurowane przez użytkownika.
W tym ostatnim przypadku można utworzyć niestandardowy format zapisu daty / czasu, definiowany ciągiem znaków. Możemy tu używać znaków odpowiadających poszczególnym wartościom:
| h | Godzina w formacie 12-godzinnym, jedna lub dwie cyfry (np. „4” lub „11”) |
| hh | Godzina w formacie 12-godzinnym, zawsze dwie cyfry (np. „04” lub „11”) |
| H | Godzina w formacie 24-godzinnym, jedna lub dwie cyfry (np. „7” lub „19”) |
| HH | Godzina w formacie 24-godzinnym, zawsze dwie cyfry (np. „07” lub „19”) |
| tt | The two-letter AM/PM abbreviation („AM” is shown as „AM”). |
| t | Określenie przed południem / po południu (AM/PM) w postaci skrótu jednoliterowego („AM” zapisywane jako „A”, „PM” zapisywane jako „P”). |
| m | Minuty, jedna lub dwie cyfry (np. „6” lub „51”) |
| mm | Minuty, zawsze dwie cyfry (np. „06” lub „51”) |
| s | Sekundy, jedna lub dwie cyfry (np. „3” lub „35”) |
| ss | Sekundy, zawsze dwie cyfry (np. „03” lub „35”) |
| d | Dzień miesiąca, jedna lub dwie cyfry (np. „9” lub „24”) |
| dd | Dzień miesiąca, zawsze dwie cyfry (np. „09” lub „24”) |
| ddd | Dzień tygodnia w postaci skrótu trzyliterowego (np. „Mon” lub „Fri”) |
| dddd | Dzień tygodnia, pełna nazwa (np. „Monday” lub „Friday”) |
| M | Miesiąc, jedna lub dwie cyfry (np. „5” lub „10”) |
| MM | Miesiąc, zawsze dwie cyfry (np. „05” lub „10”) |
| MMM | Miesiąc, w postaci skrótu trzyliterowego (np. „Feb” lub „Aug”) |
| MMMM | Miesiąc, pełna nazwa (np. „February” lub „August”) |
| y | Rok, w postaci jednej cyfry (2026 jest wyświetlany jako „1”) |
| yy | Rok, w postaci dwóch cyfr (2026 jest wyświetlany jako „26”) |
| yyyy | Rok, w postaci 4 cyfr (2026 jest wyświetlany jako „2026”) |
Na potrzeby tego przykładu wprowadzimy tutaj format:
MM/dd/yyyy hh:mm tt
co będzie oznaczało datę i czas sformatowany w postaci:
miesiąc / dzień / rok godzina : minuty AM/PM
Przykładowo godzina 15:21 6 kwietnia 2026 roku zapisana będzie jako:
04/06/2026 03:21 PM
Efekt zobaczymy w dalszej części ćwiczenia, po uruchomieniu aplikacji.
Analogicznie, jak w przypadku kontrolki Calendar, możemy określić zakres dostępnych dat w kontrolce DateTime Picker. Działa to identycznie. Poniżej wprowadzimy takie same ustawienia, jakich użyliśmy w poprzednim ćwiczeniu. W polu MinTime wpisujemy:
Now() – 7 * 86400
natomiast w polu MinDate:
Now() + 7 * 86400
Będzie to oznaczało zakres dat od siedmiu dni wstecz do siedmiu dni naprzód począwszy od dziś. Poniżej możemy również dostosować kolorystykę kontrolki. Ostatecznie nasze ustawienia wyglądają tak:
Po uruchomieniu aplikacji kontrolka wyświetla się w widocznej poniżej postaci.
Po prawej stronie widoczny jest przycisk, który umożliwia rozwinięcie kontrolki i wyświetlenie kalendarza.
Jak widzimy, wyświetlane są daty z podanego przez nas zakresu. Widok kalendarza jest taki sam, jak w przypadku kontrolki Calendar, jest jednak istotna różnica. W górnej części wyświetlana jest wybrana data, ale dodatkowo widzimy również czas, wyświetlony zgodnie z ustalonym przez nas formatem.
W odróżnieniu od kalendarza kontrolka DateTime Picker obsługuje bowiem nie tylko samą datę, ale również czas dnia. Co więcej, jest on nie tylko wyświetlany, ale możemy również go zmienić.
Jeżeli w kontrolce po prostu klikniemy na inny dzień, przekonamy się, że data się zmieniła, ale godzina pozostała taka sama.
Aby zmienić godzinę i minuty, wystarczy kliknąć na pole wyświetlające czas wewnątrz kontrolki. Przekonamy się, że możemy wtedy po prostu wprowadzić z klawiatury odpowiednie wartości. Analogicznie można również w sposób „ręczny” wpisać dane w polu daty.
Na koniec wspomnijmy jeszcze, że element wyświetlający kalendarz w kontrolce DateTime Picker działa analogicznie, jak kontrolka kalendarz. Można więc nawigować po datach korzystając z przycisków ze strzałkami i klikając w górnej części kontrolki. Zostało to dokładnie opisane w poprzednim ćwiczeniu.
W kolejnym odcinku przejdziemy do konfigurowania animacji w symbolach Industrial Graphics.
