如何在MAUI的Editor或Label中显示DatePicker选择的日期

方法一：用数据绑定（推荐，符合MAUI设计逻辑） #

这种方式不用手动写事件，靠数据驱动更新UI，更简洁。

1. 写ViewModel代码 #

先定义一个ViewModel类，实现属性变更通知：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MainViewModel : INotifyPropertyChanged
{
    private DateTime _selectedDate;
    public DateTime SelectedDate
    {
        get => _selectedDate;
        set
        {
            _selectedDate = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        // 初始化默认日期，和你的DatePicker默认值一致
        SelectedDate = new DateTime(2022, 1, 1);
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改XAML绑定控件 #

给页面设置绑定上下文，再把DatePicker和展示控件绑定到同一个属性：

<!-- 先给页面绑定ViewModel -->
<ContentPage.BindingContext>
    <local:MainViewModel />
</ContentPage.BindingContext>

<VerticalStackLayout>
    <!-- DatePicker绑定到ViewModel的SelectedDate -->
    <DatePicker x:Name="mDatePicker" 
                Style="{StaticResource dateStyle}" 
                MinimumDate="01/01/2020" 
                MaximumDate="12/31/2022" 
                Date="{Binding SelectedDate}" />

    <!-- 用Label展示日期，可自定义格式 -->
    <Label Style="{StaticResource label1Style}" 
           Text="{Binding SelectedDate, StringFormat='选中日期：{0:yyyy-MM-dd}'}" />

    <!-- 或者用Editor展示，支持编辑 -->
    <Editor Text="{Binding SelectedDate, StringFormat='{0:yyyy-MM-dd}'}" />

    <!-- 你的原有控件 -->
    <Label Style="{StaticResource label1Style}" Text="Location" HorizontalOptions="Start" VerticalOptions="Start" />

    <Picker x:Name="picker" Title="Select a Company" Style="{StaticResource comboStyle}">
        <Picker.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Baboon</x:String>
                <x:String>Capuchin Monkey</x:String>
                <x:String>Blue Monkey</x:String>
                <x:String>Squirrel Monkey</x:String>
                <x:String>Golden Lion Tamarin</x:String>
                <x:String>Howler Monkey</x:String>
                <x:String>Japanese Macaque</x:String>
            </x:Array>
        </Picker.ItemsSource>
    </Picker>

    <Button HeightRequest="60" WidthRequest="300" Grid.Row="3" x:Name="inbtn" Text="In" Style="{StaticResource inButtonStyle}" SemanticProperties.Hint="navigate when clicked" Clicked="OnInClicked" HorizontalOptions="Center" />

    <Button HeightRequest="60" WidthRequest="300" Grid.Row="3" x:Name="outbtn" Text="Out" Style="{StaticResource outButtonStyle}" SemanticProperties.Hint="navigate when clicked" Clicked="OnOutClicked" HorizontalOptions="Center" />
</VerticalStackLayout>

方法二：用DateSelected事件（后台代码直接处理） #

如果不想用MVVM，直接给DatePicker加事件，手动更新展示内容。

1. 修改XAML添加事件和展示控件 #

<DatePicker x:Name="mDatePicker" 
            Style="{StaticResource dateStyle}" 
            MinimumDate="01/01/2020" 
            MaximumDate="12/31/2022" 
            Date="01/01/2022"
            DateSelected="OnDatePickerSelected" />

<!-- 添加展示用的Label -->
<Label x:Name="dateLabel" Style="{StaticResource label1Style}" />
<!-- 或者Editor -->
<Editor x:Name="dateEditor" />

<!-- 你的原有控件... -->

2. 后台写事件处理代码 #

private void OnDatePickerSelected(object sender, DateChangedEventArgs e)
{
    // 更新Label文本，自定义日期格式
    dateLabel.Text = $"选中日期：{e.NewDate:yyyy-MM-dd}";
    // 更新Editor文本
    dateEditor.Text = e.NewDate.ToString("yyyy-MM-dd");
}

常见排查点 #

• 检查展示用的Label/Editor有没有被其他控件遮挡，或者IsVisible是不是设成了false
• 用数据绑定时，必须确保ViewModel实现了INotifyPropertyChanged，不然属性变了UI不会更
• 日期格式可以用StringFormat固定，避免系统文化差异导致显示异常

内容的提问来源于stack exchange，提问作者Danul Hivi Vihan