DatePicker

.NET 多平臺應用程式 UI （.NET MAUI） DatePicker 會叫用平臺的日期選擇器控件，並可讓您選取日期。

DatePicker 定義八個屬性：

MinimumDate 類型的 DateTime ，其預設值為1900年的第一天。
MaximumDate 型別 DateTime，其預設值為2100年的最後一天。
Date 的類型為 DateTime，選取的日期預設為 DateTime.Today 的值。
Format 型別 string，可為標準或自定義的 .NET 格式字串，預設為 "D"，即長日期模式。
TextColor 的類型是 Color，用來顯示選取日期的色彩。
FontAttributes 的型別為 FontAttributes，預設為 FontAttributes.None。
FontFamily 的型別為 string，預設為 null。
FontSize 類型為 double，預設為 -1.0。
CharacterSpacing，其類型為double，是文字DatePicker字元之間的間距。

這八個屬性都受到 BindableProperty 物件支援，這表示可以設定樣式，而且屬性可以是數據系結的目標。屬性 Date 的默認系結模式 BindingMode.TwoWay為，這表示它可以是使用Model-View-ViewModel （MVVM）模式之應用程式中數據系結的目標。

DatePicker 定義下列屬性：

MinimumDate 是 DateTime? 類型的，可選擇的最低日期（設為 null 以移除下限）。預設為 1900-01-01。
MaximumDate 的類型 DateTime?，最高可選取日期（設定為 null 以移除上限）。預設為 2100-12-31。
Date 的類型 DateTime?，選取的日期。如果未明確設定，則預設為今天。將設定為null以表示未選取任何日期。
Format 型別 string，可為標準或自定義的 .NET 格式字串，預設為 "D"，即長日期模式。
TextColor 的類型是 Color，用來顯示選取日期的色彩。
FontAttributes 的型別為 FontAttributes，預設為 FontAttributes.None。
FontFamily 的型別為 string，預設為 null。
FontSize 類型為 double，預設為 -1.0。
CharacterSpacing，其類型為double，是文字DatePicker字元之間的間距。
IsOpen 類型 bool （雙向），用於指示平台日期選擇器 UI 是否已開啟。

所有這些屬性都由 BindableProperty 物件支援。此 Date 屬性的預設繫結模式為 BindingMode.TwoWay 。

其他活動：

Opened 和 Closed 事件用於顯示或關閉平台日期選擇器 UI 時。

警告

設定 MinimumDate 和 MaximumDate時，請確定MinimumDate必須小於或等於 MaximumDate。否則， DatePicker 將會引發例外狀況。

DatePicker 確保 Date 介於 MinimumDate 和 MaximumDate 之間，且包含兩者。如果將 MinimumDate 或 MaximumDate 設定為使 Date 不在其間，DatePicker 將會調整 Date 的值。

當用戶選取日期時，會 DatePicker 引發 DateSelected 事件。

建立 DatePicker

在 XAML 中指定DateTime值時，XAML 剖析器會使用DateTime.Parse方法，並搭配CultureInfo.InvariantCulture參數，將字串轉換成DateTime值。日期必須以精確的格式指定：兩位數的月份、兩位數的天數，以及以斜線分隔的四位數年份：

<DatePicker MinimumDate="01/01/2022"
            MaximumDate="12/31/2022"
            Date="06/21/2022" />

下列螢幕快照顯示 iOS 上產生的 DatePicker ：

iOS 上 DatePicker 控件的螢幕快照。

如果將 BindingContext 的 DatePicker 屬性設定為一個包含名為 DateTime、MinDate 和 MaxDate 的 SelectedDate 類型屬性的 viewmodel 實例（例如），您可以像這樣實例化 DatePicker：

<DatePicker MinimumDate="{Binding MinDate}"
            MaximumDate="{Binding MaxDate}"
            Date="{Binding SelectedDate}" />

在此範例中，這三個屬性都會初始化為 viewmodel 中的對應屬性。 Date由於屬性具有的TwoWay系結模式，因此用戶選取的任何新日期都會自動反映在 viewmodel 中。

DatePicker如果不包含其 Date 屬性上的系結，您的應用程式應該將處理程式附加至DateSelected事件，以在用戶選取新的日期時通知該事件。

在程式代碼中，您可以將 MinimumDate、MaximumDate 和 Date 屬性初始化為類型 DateTime 的值：

DatePicker datePicker = new DatePicker
{
    MinimumDate = new DateTime(2018, 1, 1),
    MaximumDate = new DateTime(2018, 12, 31),
    Date = new DateTime(2018, 6, 21)
};

如需設定字型屬性的詳細資訊，請參閱字型。

DatePicker 和版面配置

您可以使用不受限制的水平版面設定選項，例如 Center、 Start或 End 搭配 DatePicker：

<DatePicker ···
            HorizontalOptions="Center" />

不過，不建議這樣做。根據屬性的設定，選取的 Format 日期可能需要不同的顯示寬度。例如，“D” 格式字串會導致 DateTime 以長格式顯示日期，而 “Wednesday， September 12， 2018” 需要大於 “Friday， May 4， 2018” 的顯示寬度。視平臺而定，此差異可能會導致 DatePicker 檢視在版面配置中變更寬度，或讓顯示器遭到截斷。

提示

最好使用HorizontalOptions的預設Fill設定搭配DatePicker，而在將Auto放入DatePicker儲存格時，避免使用Grid的寬度。

在 Windows 上當地語系化 DatePicker

針對以 Windows 為目標的應用程式，請確保 DatePicker 顯示符合使用者設定地區格式的日期，包括選取器對話方塊中的月份和星期幾名稱；這需要在專案的 Package.appxmanifest 檔案中進行特定設定。將套件指令清單中的元素當地語系化可藉由遵守用戶地區設定的文化規範來改善用戶體驗。

本地化<xref:Microsoft.Maui.Controls.DatePicker>中的日期格式和字串需要在Package.appxmanifest 檔案中宣告支持的語言。

請遵循下列步驟，在 DatePicker Windows 上設定當地語系化：

找出 [資源] 區段。

前往您的專案資料夾 Platforms\Windows，並在程式碼編輯器或 Visual Studio 中開啟 Package.appxmanifest 檔案。如果使用 Visual Studio，請確定您正在檢視檔案的原始 XML。請尋找可能最初包含以下內容的 <Resources> 區段：
```
<Resources>
    <Resource Language="x-generate" />
</Resources>
```
指定支持的語言。

針對每個支援的語言，將 <Resource Language="x-generate"> 取代為 <Resource /> 元素。語言代碼的格式應該是 BCP-47 語言標記，例如en-US英文（美國）、西班牙文（西班牙）、 es-ESfr-FR法文（法國）或de-DE德文（德國）。例如，若要新增英文（美國）和西班牙文（西班牙）的支援，您應該修改您的<Resources>區段，如下所示：
```
<Resources>
    <Resource Language="en-US" />
    <Resource Language="es-ES" />
</Resources>
```

此組態可確保 DatePicker 會根據使用者的地區設定顯示日期格式、月和日，大幅增強應用程式在不同區域的可用性和輔助功能。

如需 .NET MAUI 應用程式中本地化的詳細資訊，請參閱當地語系化。

可為 Null 的選取日期（.NET 10）

在 .NET 10 中， DatePicker 支援可為 Null 的值，因此您可以表示「未選取日期」，並在繫結中清除選取：

Date 是 DateTime?
MinimumDate 是 DateTime?
MaximumDate 是 DateTime?

行為注意事項：

根據預設，如果您未設定 Date，控制項會使用今天的日期進行顯示。您可以明確設定 Date 為以 null 顯示未設定的狀態，並依賴使用者輸入來選擇值。
當非 Null Date 設定在界限之外 MinimumDate/MaximumDate 時，它會強制進入範圍。
MinimumDate / MaximumDate 可以設定為以 null 移除該界限。

XAML 範例，其中包含可為 Null 的綁定，以及清除選取項目的操作：

<VerticalStackLayout>
    <DatePicker Date="{Binding SelectedDate}"
                            MinimumDate="{Binding MinDate}"
                            MaximumDate="{Binding MaxDate}" />

    <Button Text="Clear date" Command="{Binding ClearDateCommand}" />
    <Label Text="Selected: {Binding SelectedDate}" />
</VerticalStackLayout>

ViewModel 草圖：

public partial class MyViewModel : ObservableObject
{
        [ObservableProperty]
        private DateTime? selectedDate;

        [ObservableProperty]
        private DateTime? minDate = new DateTime(2020, 1, 1);

        [ObservableProperty]
        private DateTime? maxDate = new DateTime(2030, 12, 31);

        [RelayCommand]
        void ClearDate() => SelectedDate = null;
}

備註

ViewModel 範例使用了 .NET Community Toolkit MVVM（CommunityToolkit.Mvvm）中的屬性。使用它們時，安裝 CommunityToolkit.Mvvm NuGet 套件，並將 using CommunityToolkit.Mvvm.ComponentModel; 和 using CommunityToolkit.Mvvm.Input; 加入你的檔案。欲了解更多資訊，請參閱 .NET 社群工具包 MVVM。

或在程式碼中設定/清除：

datePicker.Date = null;                 // Clear selection (no date)
datePicker.MinimumDate = null;          // No lower bound
datePicker.MaximumDate = null;          // No upper bound
datePicker.Date = new DateTime(2025, 8, 19); // Set a specific date

以程式設計方式開啟和關閉日期選擇器

你可以透過控制選擇器的焦點來程式化開啟和關閉選取介面：

// Open the platform picking UI
picker.Focus();

// ... later, close the UI
picker.Unfocus();

平台說明：

Android 在聚焦時顯示對話，當焦點不集中時則會忽略。
iOS 與 Mac Catalyst 在聚焦時會呈現輸入視圖;失去焦點就結束了編輯。
Windows 使用飛出/ComboBox;Focus 並不總是能在所有情境下強制下拉選單打開。建議以使用者互動來開啟；若失焦則會關閉。

要偵測選擇器何時開啟或關閉，處理 Focused 與 Unfocused 事件。

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-07-28