Calendar 控制

發行項
03/21/2023

用於輸入日期值的控制項。

Note

完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。

描述

此程式碼元件為繫結至按鈕的 Fluent UI Calendar 控制項提供了一個包裝函式，以便在畫布應用程式和自訂頁面中使用。

內容

索引鍵屬性

屬性	名描述
`SelectedDateValue`	變更事件後要預先選取或要選取的日期值。例如：今天的日期：`Today()`、根據語言的日期：`DateValue("24/7/2022",Language())`、特定地區語言：`DateValue("24/07/2022","en-GB")`
`ShowGoToToday`	「移至今日」選項是否可見
`MonthPickerVisible`	月份選擇器是否可見
`DayPickerVisible`	日期選擇器是否可見
`HighlightSelectedMonth`	所選月份是否在行事曆中醒目顯示
`HighlightCurrentMonth`	目前月份是否在行事曆中醒目顯示
`ShowWeekNumbers`	週數是否可見
`ShowSixWeeksByDefault`	第六週是否預設為可見。
`MinDate`	如果指定了日期值，則不允許超出該日期的瀏覽。有關正確格式，請參考為所選日期提供的範例。
`MaxDate`	如果指定了日期值，則不允許超出該日期的瀏覽。有關正確格式，請參考為所選日期提供的範例。
`FirstDayOfWeek`	選擇要在行事曆顯示為一週的第一天的日期。

樣式屬性

屬性	描述
`Theme`	接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。將此留空將使用 Power Apps 定義的預設主題。有關如何設定的指南，請參閱佈景主題。
`BackgroundColor`	元件的背景色。例如白色或 #ffffff
`AccessibilityLabel`	螢幕助讀程式 aria-label

事件屬性

屬性	描述
`InputEvent`	要傳送到控制項的事件。例如 `SetFocus`。請參閱下文。

行為

支援將 SetFocus 視為 InputEvent。

使用 OnChange

選取日期後，可以透過 selectedDate 輸出屬性來取得值。以下是一組範例程式碼，可以新增到 'OnChange' 屬性中，具體取決於需要視覺化的輸出方式。

Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, ShortDate, Language())));
// Example - Output: 7/14/2022

Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, LongDate, Language())));
// Example - Output: Sunday, July 3, 2022

Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, ShortDate, "en-GB")));
// Example - Output: 14/07/2022

在控制項上設定焦點

當顯示新對話方塊，且預設焦點應在控制項上時，將需要明確設定焦點。

若要呼叫輸入事件，您可以將繫結至 Input Event 屬性的內容變數設定為以 SetFocus 開頭且後面跟著隨機元素的字串，以確保應用程式會將其偵測為變更。

範例 Power Fx 公式：

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

然後，內容變數 ctxResizableTextareaEvent 會繫結至屬性 InputEvent 屬性。

限制

此程式碼元件只能在畫布應用程式和自訂頁面中使用。

共用方式為