MAUI怎么实现日期和时间选择 MAUI DatePicker和TimePicker

星降 2026-01-21 00:00:00 次阅读

MAUI 中使用内置 DatePicker 和 TimePicker 实现日期时间选择，无需额外 NuGet 包；DatePicker 通过 Date、MinimumDate 等属性和 ValueChanged 事件控制日期选择，TimePicker 通过 Time、Format 和 TimeChanged 处理时间选择，需手动合并为 DateTime，推荐 MVVM 双向绑定并注意平台差异与格式匹配。

MAUI 中实现日期和时间选择，主要靠内置的 DatePicker 和 TimePicker 控件，用法简洁，支持绑定、事件响应和平台适配，不需要额外 NuGet 包。

DatePicker：选日期很简单

DatePicker 默认显示一个可点击的文本框，点击后弹出系统原生日期选择器（iOS 是滚轮，Android 是日历或滚轮，Windows 是下拉日历）。关键属性有：

Date：绑定或设置当前选中的 DateTime 值（只取日期部分）
MinimumDate / MaximumDate：限制可选范围，比如不能选今天以前的日期
Format：自定义显示格式，如 "yyyy-MM-dd" 或 "MMM dd, yyyy"
ValueChanged 事件：用户确认选择后触发，可用来更新 ViewModel 或执行逻辑

示例 XAML：

TimePicker：选时间同样直接

TimePicker 类似，点击弹出系统时间选择器（通常为小时/分钟滚轮）。核心属性包括：

Time：绑定或设置选中的 TimeSpan（注意不是 DateTime）
Format：控制显示，如 "h:mm tt"（12 小时制）或 "HH:mm"（24 小时制）
TimeChanged 事件：用户确定时间后触发

注意：如果需要把时间跟日期合并成完整 DateTime，得手动组合，比如 selectedDate.Date + selectedTime。

绑定到 ViewModel 的实用写法

推荐用 MVVM 方式管理状态。在 ViewModel 中定义：

public DateTime SelectedDate { get; set; } = DateTime.Today;
public TimeSpan SelectedTime { get; set; } = TimeSpan.FromHours(9);
配合 INotifyPropertyChanged 实现属性变更通知（用 CommunityToolkit.Mvvm 更省事）

XAML 中双向绑定即可：

小技巧和注意事项

iOS 上 D
atePicker 默认是“年-月-日”滚轮，不支持只选年份或月份；如需精简，得自定义渲染器（较重）
Android 某些版本可能默认弹出日历视图，可通过 DatePicker.SetUseCalendarView(true/false) 在代码中控制（需平台判断）
TimePicker 不支持秒选择，如需秒级精度，得用 Slider 或自定义控件
两个控件都支持 IsEnabled 控制是否可操作，适合表单流程控制