日期時間選擇器小器具 (主題化) 9.3.3 或更新版本
下列主題包含 ThingWorx 9.3.3 或更新版本中小器具的相關資訊。如果您使用的是舊版 ThingWorx，請參閱日期時間選擇器小器具。
9.3.3 中的小器具變更
• 已移除目前日期選取按鈕。您可以按一下「選取」或「取消」來確認或取消選取。
• 新增了在選取範圍、遮罩輸入等項目時支援時間的內容。
• 年、月與時間選取方塊現在支援直接鍵入值。
• 預設不會為例如 DateLabel 與 TimeLabel 這類的內容指派預設值。可使用小器具內容來定義要顯示在小器具上的標籤。
 |
當套用日期或時間篩選器時，「日期時間選擇器」小器具的變更也會影響「基於晶片的資料篩選器」小器具的介面。
|
概觀
您可以使用「日期時間選擇器」小器具來讓使用者選取混搭中的單一日期或時間；或範圍。在執行時間，小器具會以摺疊狀態顯示。按一下行事曆圖示可開啟行事曆檢視，其會顯示選取下拉清單，以及每個月的天數。行事曆下拉清單是支援鍵盤輸入的組合方塊。您可以鍵入值來更快速地選取項目。行事曆按鈕可開啟一個快顯行事曆，可讓您以互動方式選取日期。根據日期選擇器組態，行事曆上會顯示不同的控制項。您可透過下列方式配置小器具：
• 啟用範圍選取。
• 從範圍中選取時，套用最小值與最大值。
• 變更日期的顯示順序。
• 啟用時間選取，含或不含秒數。
• 使用 24 小時制或 12 小時制格式顯示時間。
只有在按一下「選取」按鈕時，才會儲存日期選取項，當按一下小器具外的區域或按下 ESC 鍵時，不會儲存。
小器具解析
1. 小器具標籤
2. 行事曆按鈕
3. 下個月與上個月按鈕
4. 月曆
5. 所選日期
根據所配置的日期選取，也可將其他選取方塊新增至小器具。下表列出了可用選項：
狀態與組態 | 日期選取 | 日期範圍選取 | 日期與時間選取 | 日期與時間範圍選取 |
|---|---|---|---|---|
關閉 |  |  |  |  |
開啟 |  |  |  |  |
啟用範圍選取
選取範圍時，第一個選取項會作為範圍的開始。但是，當選取的第二個日期早於第一個日期時，會自動切換日期以保持有效範圍。此外，按一下新日期會清除現有範圍並啟動新範圍的選取。
對日期選取套用限制
您可使用以下三種方式之一來限制可在行事曆上選取的日期範圍：
• 當選取單一日期時使用 MinDate 與 MaxDate 內容，或使用 MinStartDate、MaxStartDate、MinEndDate 與 MaxEndDate。
• 使用 YearRange 內容。依預設，範圍值設定為 10 年。
• 使用 MaxRange 內容將可用日期限制在特定範圍內。
啟用時間選取
依預設，日期時間選擇器可讓您選取日期。啟用時間選取可讓使用者除了選取行事曆上的日期外，還可以選取特定時間或時間範圍。欲將時間選取新增至小器具，請將小器具 DateOnly 內容設定為 false。依預設，時間選取配置為可選取小時與分鐘。您可以將 DisplaySeconds 內容設定為 true 來讓使用者選取秒。下圖顯示了時間選取包括秒的小器具。
自訂範圍值
依預設，小器具會顯示所有日期。您可使用 MaxRange 內容將日期選取限制在特定範圍內。例如，欲將可能的範圍設定為 20 天。將 DateRange 內容設定為 true，並將「驗證」面板中的 MaxRange 內容設定為 20。
下圖顯示所選範圍值，以及在範圍外的日期。範圍會在使用者選取初始開始或結束日期之後於執行時期計算。MaxRange 在「最小」與最大開始與結束日期之內。選取後，設定值之外的日期會禁用；請參閱圖中的範例編號 3。
自訂時間格式
依預設，時間會以 24 小時制格式顯示。欲使用 12 小時制格式顯示時間，請將小器具 TwelveHourClock 內容設定為 true。會顯示額外的下拉清單用於選取「上午」或「下午」。
| | 您可使用方向鍵選取「下午」或「上午」。 |
設定日期與時間間隔
使用 Interval 內容可相對於小器具在執行時間顯示時的目前日期或時間位移預設所選值。您可以使用 IntervalType 內容，按日、小時、分或秒來向前或向後位移所選值。例如，欲使日期選擇器小器具上的所選時間前進 30 分鐘，請將 IntervalType 內容設定為「分鐘」，並將 Interval 內容設定為 30。
自訂日期順序
依預設，會根據檢視混搭之使用者的地區設定自動設定日期順序。例如，在某些地理區域，會使用日-月-年的格式顯示日期，而在其他地理區域則使用月-日-年的格式。您可以使用小器具 DateOrder 內容針對所有使用者手動設定順序。當您套用特定順序時，MonthFormat 與 DateDelimiter 會新增至內容清單。
自訂日期格式
使用輸入遮罩
依預設，小器具會顯示字元字串，指示小器具支援的日期或時間格式。使用組合方塊可讓使用者更快速地鍵入小器具值，而無需開啟該行事曆。您可以將 DisableMaskedInput 內容設定為 true 來禁用輸入遮罩。下圖顯示了在顯示輸入遮罩情況下的日期更新。
小器具內容
內容 | 描述 | 基礎類型 | 預設值 | 可繫結? (Y/N) | 可當地語系化? | ||
|---|---|---|---|---|---|---|---|
Label | 顯示在「日期時間選擇器」小器具標籤中的文字。 | STRING | N/A | Y | Y | ||
LabelAlignment | 將小器具標籤「左」、「右」或「置中」對齊。 | STRING | 「左」 | Y | N | ||
Disabled | 使用此內容可禁用混搭中的小器具。小器具會顯示在混搭中，但您無法按一下。 | BOOLEAN | False | Y | N | ||
DisableMaskedInput | 禁用在執行時間顯示日期模式預覽的輸入遮罩。 | BOOLEAN | False | Y | N | ||
HintText | 顯示預留位置文字，說明應在欄位中輸入的內容。 | STRING | SELECT DATE & TIME | Y | Y | ||
DateOnly | 僅允許使用者選取日期。若要啟用時間選取，請將此內容設定為 false。 | BOOLEAN | TRUE | N | N | ||
DisplaySeconds | 可讓顯示的時間精確到秒。當 DateOnly 為 false 時可用。 | BOOLEAN | FALSE | N | N | ||
DateDelimiter | 指定用來分隔日、月與年的字元。例如，( - ) 連字號會將日期顯示為：05–10–2020。 | STRING | N/A | N | Y | ||
MonthFormat | 可讓您控制日期中的月份格式。支援的選項： • 「完整」- October • 「簡短」- Oct • 「數值」- 10 | STRING | 「完整」 | N | N | ||
PrimaryActionPosition | 可讓您將主要動作按鈕的位置設定為「左」或「右」 主要動作是按鈕群組中的 • 「完成」 按鈕。 | STRING | 「左」 | N | N | ||
DateOrder | 可讓您設定日期顯示格式。支援的選項： • 「自動」 • 「日-月-年」 • 「月-日-年」 • 「年-月-日」 將此內容從「自動」變更為特定順序會將 DateDelimiter 與 MonthFormat 內容新增至小器具。 | STRING | 「自動」 | N | N | ||
FormatToken | 選取預設的「自動」時，系統日期會顯示在小器具中。此外，DateDelimiter 與 MonthFormat 內容會隱藏。
| STRING | N/A | N | Y | ||
MinDate | 設定可用於日期選取的最小日期。 | DATETIME | 預設提示文字 | 在 | N | ||
MaxDate | 設定可用於日期選取的最大日期。 | DATETIME | 預設提示文字 | 在 | N | ||
DateRange | 啟用日期範圍選取。 | BOOLEAN | False | ||||
RangeChanged | 這是在變更所選日期範圍時會觸發的事件。 | 事件 | N/A | Y | N | ||
HintText | 要在小器具內顯示為預留位置的提示文字。當啟用輸入遮罩時，提示文字會根據套用的模式顯示。 | STRING | Autohint | Y | Y | ||
StartDateHintText | 設定在啟用範圍選取的情況下要針對開始日期顯示的提示文字。 | STRING | Autohint | Y | Y | ||
EndDateHintText | 設定在啟用範圍選取的情況下要針對結束日期顯示的提示文字。 | STRING | Autohint | Y | Y | ||
StartDateLabel | 設定要針對行事曆上開始日期顯示的標籤。 | STRING | N/A | Y | Y | ||
EndDateLabel | 設定要針對行事曆上結束日期顯示的標籤。 | STRING | N/A | Y | Y | ||
StartTimeLabel | 設定要針對小器具中開始時間欄位顯示的標籤。 | STRING | 從 | Y | Y | ||
EndTimeLabel | 設定要針對小器具中開始時間欄位顯示的標籤。 | STRING | 至 | Y | Y | ||
AMPMLabel | 設定在使用 12 小時制時間格式時，要針對「上午/下午」下拉清單顯示的標籤。 | STRING | 「上午/下午」 | Y | Y | ||
CalendarStartTimeLabel | 設定在啟用範圍選取的情況下，要顯示在行事曆上時間開始欄位上方的標籤。 | STRING | N/A | Y | Y | ||
CalendarEndTimeLabel | 設定在啟用範圍選取的情況下，要顯示在行事曆上時間結束欄位上方的標籤。 | STRING | N/A | Y | Y | ||
MinStartDate | 設定可用於日期範圍選取的最小日期。 | DATETIME | 預設提示文字 | 在 | N | ||
MaxStartDate | 設定在選取日期範圍時可用於開始日期的最大日期。 | DATETIME | 預設提示文字 | 在 | N | ||
MinEndDate | 設定在選取日期範圍時可用於結束日期的最小日期。 | DATETIME | 預設提示文字 | 在 | N | ||
MaxEndDate | 設定可用於日期範圍選取的最大日期。 | DATETIME | 預設提示文字 | 在 | N | ||
IntervalType | 可讓您將間隔設定為「小時」、「分鐘」、「秒」或「天」。 | STRING | 「小時」 | N | N | ||
Interval | 設定日期或時間間隔。 | NUMBER | N/A | N | N | ||
CustomClass | 可讓您定義要套用至小器具頂部 div 元素的 CSS 類別名稱。您可以輸入多個類別，並以空格分隔。 | STRING | N/A | Y | N | ||
TabSequence | 使用者按下 Tab 鍵時小器具反白的順序。 | NUMBER | N/A | N | N | ||
WeeklyCalendarStart | 可讓您將週行事曆的起始日配置為星期日或星期一。 | STRING | 「星期一」 | N | N | ||
InitializeWithCurrentDateTime | 在執行時間檢視小器具時，將目前日期與時間顯示為預設選取項。 | BOOLEAN | TRUE | N | N | ||
LabelAlignment | 可讓您在小器具中向左、向右或置中對齊標籤。 | STRING | 「左」 | N | N | ||
DateTime | 可讓您設定或擷取小器具上的所選值。 | DATETIME | N/A | Y | N | ||
Changed | 修改此小器具的資料時所觸發的可繫結事件。 | N/A | N/A | Y | N | ||
ResetToDefaultValue | 將此小器具的輸入重設為其預設值。 | N/A | N/A | Y | N | ||
Width | 小器具寬度。 | NUMBER | N/A | N | N | ||
Height | 小器具高度。高度依預設會設定為標籤的最大寬度。如果小器具有多行標籤，高度會增加。在內容面板中輸入值或將畫布中的小器具重定大小，以設定固定高度。 | NUMBER | N/A | N | N |
驗證日期時間選擇器小器具資料
除了通用內容以外，您也可以使用 MaxDate 與 MinDate 內容來限制小器具中的可用日期範圍。當選取超出範圍的日期時，會顯示失敗訊息。
欲配置預設失敗訊息，請使用 MinDateFailureMessage 與 MaxDateFailureMessage 內容，或 MaxRangeFailureMessage 內容。
如需有關通用驗證內容的詳細資訊，請參閱將驗證套用至小器具。
內容 | 描述 | 基礎類型 | 預設值 | 是否可繫結 (Y/N) | 可當地語系化 (Y/N) | ||
|---|---|---|---|---|---|---|---|
CriteriaMessage | 為驗證條件以及驗證失敗時顯示的訊息。 | STRING | n\a | Y | Y | ||
CriteriaMessageDetails | 為驗證條件和失敗訊息顯示的詳細資訊。 | STRING | n\a | Y | Y | ||
MaxDate | 設定可用於日期選取的最大日期。 | DATETIME | ${value} is the maximum value | Y | N | ||
MaxRange | 設定最大天數以限制使用者選取開始日期和結束日期。 | NUMBER | n\a | N | N | ||
MaxRangeFailureMessage | 開始日期和結束日期間的選定範圍超過 MaxRange 值時顯示的訊息。 | 文字欄位 | n\a | IN | Y | ||
MaxDateFailureMessage | 當所選日期晚於最大日期值時顯示的訊息。 | DATETIME | ${value} is the maximum date | Y | Y | ||
MinDate | 可用於日期選取的最小日期。 | DATETIME | ${value} is the maximum date | Y | N | ||
MinDateFailureMessage | 當所選日期早於最小日期值時顯示的訊息。 | DATETIME | ${value} is the minimum date | Y | Y | ||
RequiredMessage | 遺失所需值時顯示的訊息。 | STRING | 需要有值 | Y | Y | ||
ShowValidationCriteria | 編輯日期時間選擇器時，顯示有關所需輸入的提示訊息。 | BOOLEAN | False | Y | N | ||
ShowValidationFailure | 當所輸入值未通過驗證時顯示失敗訊息。 | BOOLEAN | False | Y | N | ||
ShowValidationSuccess | 當所輸入值成功通過驗證時，顯示成功訊息。 | BOOLEAN | False | Y | |||
SuccessMessage | 值有效時顯示的訊息。 | STRING | n\a | Y | Y | ||
SuccessMessageDetails | 顯示有關驗證成功訊息之詳細資訊的次要訊息。 | STRING | n\a | Y | Y | ||
Validate | 小器具值變更時觸發的可繫結事件。將此事件繫結至服務或函數以套用驗證模式或運算式。 | 事件 | n\a | Y | N | ||
ValidationCompleted | 完成此小器具的所有驗證時觸發的事件。
| 事件 | n\a | Y | N | ||
ValidationCriteriaIcon | 設定要在驗證條件的提示訊息中顯示的 SVG 圖示。 | IMAGELINK | info | N | N | ||
ValidationFailureIcon | 設定當驗證失敗時要在狀況訊息中顯示的 SVG 圖示。 | IMAGELINK | error | N | N | ||
ValidationOutput | 擷取小器具驗證的輸出。傳回的值為 undefined、unvalidated、valid 或 invalid。 | STRING | n\a | Y | N | ||
ValidationState | 這是設定驗證狀態的可繫結內容。您可以將此內容設定為 undefined、unvalidated、valid、invalid。 | STRING | undefined | Y | N | ||
ValidationSuccessIcon | 選取當驗證成功時要在狀況訊息中顯示的 SVG 圖示。 | IMAGELINK | success | N | N | ||
ValueRequired | 需要在小器具中選取日期或時間。 | BOOLEAN | False | Y | N |