W tym samouczku pokażę ci, jak wprowadzać daty i czasy w swoich formularzach internetowych. Omówię różne dostępne typy wprowadzania oraz udzielę cennych wskazówek dotyczących praktycznego zastosowania. Omówimy zarówno wprowadzanie daty, jak i godziny, abyś zdobył/miała solidne zrozumienie implementacji tych funkcji.
Najważniejsze wnioski
- Typ wprowadzania date pozwala na wybranie jednej daty.
- Typ wprowadzania dateTime-local łączy datę i czas bez dostosowania strefy czasowej.
- Formatowanie wprowadzonych dat i czasów standardowo odbywa się zgodnie z ISO 8601.
- Przeglądarki mogą mieć różne właściwości wyświetlania dla wprowadzania daty i czasu.
Podstawy wprowadzania daty i czasu
Aby wprowadzać daty i czasy w swoich formularzach, potrzebujesz typów wprowadzania HTML: date, dateTime-local i time. Typ wprowadzania date pozwala użytkownikowi wybrać datę, natomiast typ dateTime-local rejestruje zarówno datę, jak i czas. Ten drugi jest wysyłany bez dostosowywania strefy czasowej, co oznacza, że dane są przesyłane na serwer w takiej postaci, w jakiej zostały wprowadzone przez użytkownika.
Teraz przyjrzymy się tym typom bliżej.
Użycie typu wprowadzania date
Aby wybrać tylko datę, możesz użyć typu date. Pozwala to użytkownikowi wybrać datę za pomocą wbudowanego narzędzia kalendarza, co poprawia użyteczność.
Gdy otwierasz narzędzie kalendarza, możesz wybrać różne daty i przesłać je, klikając "Prześlij". Data jest wysyłana w standardowym formacie: Rok-Miesiąc-Dzień.
Warto zauważyć, że wygląd kalendarza może się różnić w zależności od przeglądarki. Zapisane ustawienia regionalne twojego systemu operacyjnego wpływają na format, w jakim będzie wyświetlana data.
Wprowadzanie dat i czasu za pomocą dateTime-local
Jeśli chcesz wprowadzić zarówno datę, jak i godzinę, powinieneś/naś użyć typu dateTime-local. Działa to podobnie jak w przypadku wprowadzania daty, z tą różnicą, że możesz również określić godzinę.
Możesz wybrać zarówno datę, jak i godzinę. Ciekawostką jest to, że czas jest wyświetlany w formacie 24-godzinnym, jeśli w twoich ustawieniach regionalnych nie jest aktywowany format AM/PM.
Gdy przesyłasz formularz, dane są również otrzymywane w formacie ISO, a czas pozostaje niezmieniony, nie jest przeliczany na inną strefę czasową.
Użycie typu time
Tylko z użyciem typu wprowadzania time możesz podać godzinę bez daty. Poprzez ten typ masz możliwość wyboru czasu, który również będzie przesyłany w formacie 24-godzinnym.
Możliwość używania innych formatów daty
Oprócz wymienionych wyżej typów, istnieje również możliwość wprowadzenia tygodni (week) i miesięcy (month). Dzięki formatowi week możesz określić konkretne tygodnie i łatwo wybrać pożądany tydzień.
W przypadku formatu month możesz wybrać tylko miesiąc, bez ustalania konkretnych dni.
Domyślne ustawienia i wartości
Kolejną pomocną wskazówką jest możliwość ustawienia domyślnych wartości dla swoich pól wejściowych. Możesz na przykład określić, że podczas wybierania daty i godziny określona data jest domyślnie ustawiona.
Strefy czasowe i kompatybilność przeglądarek
Centralnym aspektem korzystania z dat i godzin jest strefa czasowa. Wprowadzone dane są przechowywane tak, jak są lokalnie wprowadzone. Nie ma konieczności dostosowywania strefy czasowej, dlatego możesz przekazać lokalny czas bezpośrednio.
Jednak ważne jest zauważenie, że wsparcie dla tych typów danych wejściowych może się różnić w zależności od przeglądarki. Podczas gdy date i dateTime-local są obsługiwane praktycznie przez wszystkie popularne przeglądarki, zaleca się sprawdzenie na stronach takich jak "Can I use", czy konkretne funkcje działają również w przeglądarkach twojej grupy docelowej.
Podsumowanie
Masz teraz ogólny przegląd implementacji dat i czasów w formularzach na twoich stronach internetowych. Znasz różne typy danych wejściowych, ich formaty i znaczenie ustawień użytkownika. Pamiętaj, że właściwe formatowanie i wsparcie przeglądarek są kluczowe dla stworzenia płynnego doświadczenia dla twoich użytkowników.
Häufig gestellte Fragen
Jaka jest różnica między date a dateTime-local?date umożliwia wybór tylko daty, podczas gdy dateTime-local umożliwia zarówno datę jak i godzinę.
Jak traktowana jest strefa czasowa w przypadku dateTime-local?Czas jest przekazywany dokładnie tak, jak został wprowadzony lokalnie, bez dostosowania do stref czasowych.
Które przeglądarki obsługują te typy danych wejściowych?Większość popularnych przeglądarek obsługuje date i dateTime-local; dla konkretnych funkcji można skonsultować "Can I use".
Czy mogę ustawić predefiniowane wartości dla pól daty?Tak, możesz ustawić predefiniowane wartości dla pól wejściowych za pomocą atrybutu value.
Jakie formaty są używane podczas przekazywania danych?Dane są przesyłane w formacie ISO (Rok-Miesiąc-Dzień dla daty, Rok-Miesiąc-Dzień T Godzina:Minuta:Sekunda dla daty i godziny).
