Okno wyboru daty i godziny

Służy do generowania kalendarza i pola wejściowego służącego do gromadzenia danych dotyczących daty i godziny. Umożliwia obsługę kalendarzy w języku narodowym, dat niedostępnych oraz różnych opcji prezentacji.

Tylko na urządzeniach mobilnych z systemem operacyjnym Android lub iOS widok Okno wyboru daty i godziny służy do wyświetlania rodzimego okna wyboru daty i godziny udostępnianego przez system operacyjny. To zachowanie oznacza, że użytkownicy widzą różne okna wyboru daty i godziny. Na przykład w systemie operacyjnym Android użytkownik może pracować nad zadaniem, używając przeglądarki Google Chrome i widząc rodzime okno wyboru daty i godziny systemu operacyjnego Android. Jeśli następnie użytkownik zacznie pracować na urządzeniu iPhone firmy Apple, zamiast tego okna będzie widzieć rodzime okno wyboru daty i godziny systemu iOS.

Mimo że data jest zapisywana w formacie czasu UTC, wyświetlana data i godzina są dostosowywane do strefy czasowej systemu użytkownika.

Ograniczenia

Jeśli użytkownik wpisze treść, która nie jest pełną datą lub ma niepoprawny format, powiązany element danych ma wartość NULL, gdy użytkownik wyzwoli zdarzenie graniczne, takie jak kliknięcie przycisku. Gdy przepływ powróci do strony, widok będzie pusty. Wszystkie inne widoki powiązane z tym samym elementem danych również będą puste.

Użycie rodzimych okien wyboru daty i godziny oznacza, że niektóre opcje konfiguracyjne nie mają zastosowania. Na przykład nie mają zastosowania następujące właściwości:

  • Wyłączone dni tygodnia
  • Daty niedostępne
  • Data rozpoczęcia niedostępnego okresu
  • Data zakończenia niedostępnego okresu
  • Początek tygodnia
  • Typ kalendarza (jeśli wybrana jest opcja hebrajski lub muzułmański )
  • Typ wyboru daty (gdy wybrana jest opcja Inline )
Jeśli widok Okno wyboru daty i godziny jest używany jako wejściowe pole tekstowe w ramach widoku Tabela, menu rozwijane Okna wyboru daty i godziny jest wyświetlane w ramach komórki tabeli. Aby wyświetlić okno wyboru powyżej tabeli, należy wybrać właściwość konfiguracji Pokaż elementy wywoływane dla elementu sterującego Tabela. Więcej informacji na ten temat zawiera sekcja Tabela.

Powiązanie danych

Na karcie właściwości Ogólne można ustawiać i modyfikować powiązanie danych widoku. Powiązanie danych zawiera początkową datę i godzinę do wyświetlenia, a ponadto przechowuje aktualizacje danej wartości. Typ danych: Date.

Właściwości konfiguracyjne

W obszarze Konfiguracja można ustawić lub zmodyfikować właściwości wyglądu i zachowania widoku.

Wielkość ekranu
Właściwość konfiguracyjna, na której znajduje się ikona Rozmiarów ekranu Ikona wielkości ekranu obok nazwy właściwości, może mieć różne wartości dla każdej wielkości ekranu. Jeśli nie zostanie ustawiona wartość, wielkość ekranu dziedziczy wartość następnej większej wielkości ekranu jako swoją wartość domyślną.
Definicje kompozycji
Definicje kompozycji służą do podawania kolorów i stylów widoku oraz do określania jego wyglądu. W edytorze kompozycji można wyświetlić podgląd wyglądu i zachowania widoku. Patrz Kompozycje.
Właściwości konfiguracyjne wyglądu elementu Okno wyboru daty i godziny znajdują się w poniższej tabeli:
Tabela 1. Właściwości konfiguracyjne wyglądu elementu Okno wyboru daty i godziny
Właściwość konfiguracyjna wyglądu Opis Typ danych
Typ pola wyboru daty Ikona wielkości ekranu Sposób wyświetlania kalendarza w oknie wyboru daty i godziny:
  • Wprowadzanie tekstu: jest wyświetlane wejściowe pole tekstowe, a kalendarz jest początkowo ukryty. Kalendarz jest wyświetlany po kliknięciu pola tekstowego.
  • Wstawiane: jest wyświetlany kalendarz wstawiany, a pole tekstowe jest ukryte.

Wartością domyślną jest Wprowadzanie tekstu.

DatePickerType
Szerokość Szerokość okna wyboru daty i godziny, gdy w przypadku właściwości Typ okna wyboru daty jest wybrana opcja Wprowadzanie tekstu. Szerokość jest wyrażana w pikselach (px), jako wartość procentowa (%) lub w firetach (em). Na przykład: 200px. Jeśli razem z wartością liczbową nie jest podany typ jednostki, domyślnie używana jest jednostka px (piksele). Domyślnie szerokość nie jest podawana. String
Wielkość Ikona wielkości ekranu Wielkość tekstu w widoku, wielkość tekstu etykiety i wielkość dopełnienia wokół tekstu. Na przykład, aby tekst i etykieta były bardziej czytelne dla smartfonów, można ustawić tę opcję konfiguracji na wartość Large , aby zrekompensować małą wielkość ekranu. TextSizeStyle
Rozmieszczanie etykiet Ikona wielkości ekranu Położenie etykiety okna wyboru daty i godziny. LabelPlacement
Szerokość etykiety Ikona dużego ekranu Szerokość etykiety. Szerokość jest wyrażana w następujących jednostkach: px (piksele), % (wartość procentowa) lub em (firety). Na przykład: 50 px, 20% lub 0,4 em. Jeśli nie jest podana żadna jednostka, domyślnie jest używana jednostka px (piksele). String
Formatowanie Format używany do wyświetlania i analizowania tekstu wprowadzanego w polu tekstowym.
Akceptuje różnorodne dane wejściowe daty, w tym formaty, które są bliżej języka naturalnego, z separatorami lub bez, odstępami, tylko dniem i miesiącem, tylko dniem itd.
Na przykład, jeśli wpiszesz 17, okno wyboru daty przyjmuje wartość 17th bieżącego miesiąca i roku. W przypadku wejścia 5/25przyjmuje on miesiąc/dzień bieżącego roku.
Ta opcja konfiguracyjna ma zastosowanie tylko wtedy, gdy przeglądarka nie ma własnego okna wyboru daty i godziny.
String
Początek tygodnia Dzień, od którego ma zaczynać się tydzień. Wartością domyślną jest niedziela. DatePickerWeekStart
Wyłączone dni tygodnia Jeden lub więcej dni tygodnia, które mają zostać zablokowane w kalendarzu. Domyślnie żaden dzień nie jest wyłączony. DatePickerDisabledWeekDays
Pokaż przycisk Dzisiaj Służy do pokazywania lub ukrywania przycisku Dzisiaj, który umożliwia ustawienie dzisiejszej daty. Domyślnie przycisk nie jest wyświetlany. Boolean
Pokaż przycisk Wyczyść Służy do pokazywania lub ukrywania przycisku Wyczyść, który umożliwia wyczyszczenie wartości daty. Domyślnie przycisk nie jest wyświetlany. Boolean
Układ Orientacja kalendarza po kliknięciu. DatePickerOrientation
Styl koloru Styl koloru okna wyboru daty i godziny. Kolory odpowiadają zmiennym w podanej kompozycji. Wartością domyślną jest Domyślny (ciemnoniebieski). DatePickerColorStyle
Pokaż numer tygodnia Ikona wielkości ekranu W przypadku kalendarza gregoriańskiego służy do wyświetlania numeru tygodnia w roku. Na przykład ostatni tydzień w roku gregoriańskim jest numerem tygodnia.52. Domyślnie, nie jest wyświetlany numer tygodnia. Boolean
Wyróżnij dzisiejszą datę Służy do wskazywania, czy w kalendarzu ma być wyróżniana dzisiejsza data. Domyślnie dzisiejsza data nie jest wyróżniana. Boolean
Ukryj nagłówek Służy do ukrywania nagłówka znajdującego się u góry niestandardowego okna wyboru daty i godziny. Domyślnie nagłówek nie jest ukrywany. Boolean
Pokaż ikonę kalendarza Wyświetlania ikonę kalendarza w polu wprowadzania tekstu. Boolean
Styl selektora roku Styl selektora roku, Domyślny lub Nowoczesny. tableHFStyle
Właściwości konfiguracyjne zachowania elementu Okno wyboru daty i godziny znajdują się w poniższej tabeli:
Tabela 2. Właściwości konfiguracyjne zachowania elementu Okno wyboru daty i godziny
Właściwość konfiguracyjna zachowania Opis Typ danych
Tylko niestandardowe okno wyboru Wskazuje, że na urządzeniu mobilnym zawsze ma być wyświetlane niestandardowe okno wyboru daty i godziny zamiast rodzimego okna wyboru daty i godziny.

Na urządzeniach mobilnych zawsze na początku jest podejmowana próba wyświetlenia rodzimego okna wyboru daty i godziny. Niestandardowe okno wyboru daty i godziny jest wyświetlane zawsze wtedy, gdy zostanie podana jedna z następujących nieobsługiwanych właściwości konfiguracyjnych:

  • Wyłączone dni tygodnia
  • Daty niedostępne
  • Data rozpoczęcia niedostępnego okresu
  • Data zakończenia niedostępnego okresu
  • Początek tygodnia
  • Typ kalendarza (jeśli wybrana jest opcja hebrajski lub muzułmański )
  • Typ wyboru daty (gdy wybrana jest opcja Inline )

Domyślnie zarówno niestandardowe, jak i rodzime okno wyboru daty i godziny są używane w odpowiednich miejscach.

Boolean
Dołącz okno wyboru godziny Służy do wyświetlania okna wyboru godziny razem z widokiem Okno wyboru daty i godziny. Domyślnie okno wyboru godziny nie jest wyświetlane. Boolean
Typ kalendarza Typ kalendarza:
  • gregoriański
  • hebrajski
  • muzułmański

Wartością domyślną jest gregoriański.

CalendarType
Indeks przechodzenia Indeks w sekwencji przechodzenia (przy użyciu klawisza Tab). Indeksy przechodzenia rozpoczynają się od 1 (niektórych indeksów może brakować). Na przykład: 1, 5, 10. Właściwość Indeks przechodzenia służy do decydowania o kolejności przechodzenia (za pomocą klawisza Tab) między obszarami interfejsu użytkownika. String
Tekst zastępczy Tekst zastępczy, który jest używany, gdy nie wprowadzono danych. Zwykle jest to krótki opis lub przykładowe dane wejściowe wymagane przez użytkownika. Jeśli powiązany element danych nie zawiera wartości, do momentu rozpoczęcia wpisywania wartości w tym polu jest wyświetlana wskazówka. Domyślnie tekst zastępczy nie jest podawany. String
Data rozpoczęcia dostępnego okresu Służy do podawania daty i godziny rozpoczęcia dostępnego okresu. Wszystkie daty przed podaną datą rozpoczęcia dostępnego okresu zostaną zablokowane. Format daty rozpoczęcia dostępnego okresu jest podawany przy użyciu właściwości Format na karcie właściwości Wygląd. Domyślnie data rozpoczęcia dostępnego okresu nie jest podawana. Date
Data zakończenia dostępnego okresu Służy do podawania daty i godziny zakończenia dostępnego okresu. Wszystkie daty po podanej dacie zakończenia dostępnego okresu zostaną zablokowane. Format daty zakończenia dostępnego okresu jest podawany przy użyciu właściwości Format na karcie właściwości Wygląd. Domyślnie data zakończenia dostępnego okresu nie jest podawana. Date
Daty niedostępne Pojedyncza data lub lista niekolejnych dat, które mają być niedostępne. Jeśli przeglądarka nie obsługuje dat niedostępnych, a została udostępniona lista dat niedostępnych, w tym widoku zostanie użyte własne okno wyboru daty i godziny, zamiast rodzimego okna przeglądarki. Domyślnie nie są podawane żadne daty niedostępne. Date (List)
Data rozpoczęcia niedostępnego okresu Data początkowa zakresu kolejnych dat, które mają być niedostępne. Domyślnie data rozpoczęcia niedostępnego okresu nie jest podawana. Date
Data zakończenia niedostępnego okresu Data końcowa zakresu kolejnych dat, które mają być niedostępne. Domyślnie data zakończenia niedostępnego okresu nie jest podawana. Date
Widok początkowy Poziom szczegółowości, od którego ma rozpoczynać działanie kalendarz:
  • Miesiąc
  • Rok
  • Dekada

Wartością domyślną jest Miesiąc.

DatePickerStartView
Minimalny tryb wyświetlania Minimalny poziom szczegółowości dat, który ma być używany w kalendarzu:
  • Dni
  • Mies.
  • lat(a)

Wartością domyślną jest Dni.

DatePickerMinViewMode
Nie zamykaj automatycznie Służy do wskazywania, że kalendarz ma być automatycznie zamykany po wybraniu daty. W przeciwnym razie zostanie zamknięty przy dezaktywowaniu okna wyboru daty i godziny. Domyślnie po wybraniu daty kalendarz jest automatycznie zamykany. Boolean

Przykład

Jeśli chcesz mieć klikalny przycisk kalendarza, możesz umieścić widok Okno wyboru daty wewnątrz widoku Grupa wejściowa. We właściwościach widoku Grupa wejściowa w przypadku właściwości Typ przycisku należy ustawić opcję Ikona, a w przypadku właściwości Informacje o przycisku należy ustawić opcję Kalendarz. W zdarzeniu On button click dla widoku grupy wejściowej wpisz następujący łańcuch:

${Control_ID}._instance.pickerControl.show();

Zdarzenia

We właściwościach Zdarzenia można ustawiać i modyfikować procedury obsługi zdarzeń widoku. Zdarzenia mogą być uruchamiane w sposób programowy lub w wyniku interakcji użytkownika z widokiem. Informacje na temat definiowania zdarzeń i kodu zdarzeń zawiera sekcja Zdarzenia zdefiniowane przez użytkownika. Okno wyboru daty/godziny ma następujące typy procedur obsługi zdarzeń:

  • On load: aktywowano podczas ładowania strony. Na przykład:

    var workerStart = ${StartDate}.getDate(); me.setStart(workerStart);

  • On change: Aktywacja po wykryciu zmiany. Na przykład:

    return confirm("Are you sure you want to change date?")

  • On day cell render: Aktywowano, gdy wyświetlana jest komórka dnia. Jest wyzwalana przed pokazaniem daty w oknie wyboru daty i godziny. Na przykład:

    me.setDate("01/01/2015")

W zależności od konkretnego zdarzenia można użyć logiki JavaScript, aby zmodyfikować efekty działania widoku. Więcej informacji na temat używania zdarzeń z widokami znajduje się w temacie Zdarzenia zdefiniowane przez użytkownika.

metody

Szczegółowe informacje na temat dostępnych metod wyboru daty/godziny można znaleźć w temacie Interfejs API JavaScript dla wyboru daty/godziny.

Zasoby dodatkowe

Więcej informacji na temat sposobu tworzenia formatki lub strony zawiera sekcja Budowanie formatek.
Informacje na temat standardowych właściwości (Ogólne, Konfiguracja, Pozycjonowanie, Widocznośći Atrybuty HTML) można znaleźć w sekcji Właściwości widoku.