用途
SfTimePicker 是 Syncfusion 为 WinUI 3 桌面应用提供的时间选择控件,用于在应用中实现时间输入与选择。它提供触摸友好的下拉微调器界面,并支持时间限制、格式化、本地化和多种自定义能力。
主要能力
- 下拉时间微调器:通过小时、分钟和 AM/PM(meridiem)列选择时间。
- 时间限制:使用 MinTime 和 MaxTime 设置可选时间范围,使用 BlackoutTimes 集合屏蔽特定时间。
- 时间格式:通过 ClockIdentifier 在 12 小时与 24 小时制之间切换,通过 DisplayTimeFormat 自定义显示格式(如 hh:mm tt、HH:mm、h:mm)。
- 本地化:通过 Language 属性本地化控件,通过 FlowDirection 支持 RTL 布局。
- 编辑模式:支持 Mask(自动纠正)与 Normal(自由输入,回车时校验)两种 DateTimeEditMode。
- 自定义:可自定义下拉按钮(DropDownButtonTemplate)、下拉表头(DropDownHeader、DropDownHeaderTemplate)、微调器单元格(ItemWidth、ItemHeight、ItemContainerStyle、ItemTemplate、ItemTemplateSelector)以及各列(TimeFieldPrepared 事件)。
- 验证与事件:提供 SelectedTimeChanged、SelectedTimeChanging、TimeFieldPrepared 事件,支持自定义校验与取消更改。
- 可访问性:支持完整键盘导航,资料称符合 WCAG。
控件结构
包含用于直接输入时间的文本编辑器、打开时间微调器的下拉按钮、含小时/分钟/meridiem 列的下拉微调器、可选的下拉表头,以及可选的提交/取消按钮。
使用方式
- NuGet 包:Syncfusion.Editors.WinUI
- 命名空间:Syncfusion.UI.Xaml.Editors
XAML 示例:
<Window xmlns:editors="using:Syncfusion.UI.Xaml.Editors"> <Grid> <editors:SfTimePicker x:Name="sfTimePicker" Header="Select Time" PlaceholderText="Pick a time" Width="250" /> </Grid> </Window>
C# 示例:
using Syncfusion.UI.Xaml.Editors;
SfTimePicker timePicker = new SfTimePicker(); timePicker.Header = "Select Time"; timePicker.PlaceholderText = "Pick a time";
timePicker.SelectedTime = new DateTimeOffset( new DateTime(2024, 1, 1, 14, 30, 0));
timePicker.SelectedTimeChanged += (s, e) => { var oldTime = e.OldDateTime; var newTime = e.NewDateTime; };
限制时间范围(如 9:00–17:00):
sfTimePicker.MinTime = new DateTimeOffset( new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 9, 0, 0)); sfTimePicker.MaxTime = new DateTimeOffset( new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 17, 0, 0));
24 小时制:
<editors:SfTimePicker ClockIdentifier="24HourClock" DisplayTimeFormat="HH:mm" />
自定义 15 分钟间隔:
using System.Collections.ObjectModel; using Syncfusion.UI.Xaml.Editors;
sfTimePicker.TimeFieldPrepared += (s, e) => { if (e.Column?.Field == DateTimeField.Minute) { var minutes = new ObservableCollection<string>(); for (int i = 0; i < 60; i += 15) { minutes.Add(i.ToString("00")); } e.Column.ItemsSource = minutes; } };
屏蔽午休时间(12:00–13:00):
using Syncfusion.UI.Xaml.Editors;
var blackoutTimes = new DateTimeOffsetCollection(); for (int minute = 0; minute < 60; minute++) { blackoutTimes.Add(new DateTimeOffset( new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 12, minute, 0))); } sfTimePicker.BlackoutTimes = blackoutTimes;
关键属性
核心属性:SelectedTime(DateTimeOffset?,选中时间)、MinTime(最小可选时间,默认 1/1/1921 10:37:16 PM)、MaxTime(最大可选时间,默认 12/31/2121 10:37:16 PM)、BlackoutTimes(DateTimeOffsetCollection,禁用时间集合)、AllowNull(bool,默认 false)、PlaceholderText(string,SelectedTime 为 null 时的水印文本)。
格式化属性:ClockIdentifier("12HourClock" 或 "24HourClock")、DisplayTimeFormat(显示格式模式)、EditMode(Mask 或 Normal)、ShowClearButton(bool,默认 true)。
下拉属性:ShowDropDownButton(bool,默认 true)、DropDownButtonTemplate、DropDownPlacement(FlyoutPlacementMode)、IsOpen(bool)、DropDownHeight(double)、VisibleItemsCount(int,默认 -1)。
下拉表头属性:ShowDropDownHeader(bool,默认 false)、DropDownHeader、DropDownHeaderTemplate、ShowColumnHeaders(bool,默认 true)。
微调器自定义属性:ItemWidth(double,默认 80)、ItemHeight(double,默认 40)、MinItemWidth(double,默认 0)、MaxItemWidth(double,默认 Infinity)、ItemContainerStyle、ItemTemplate、ItemTemplateSelector。
事件
- SelectedTimeChanged:SelectedTime 变化后触发,提供新旧值。
- SelectedTimeChanging:SelectedTime 更新前触发,可取消。
- TimeFieldPrepared:下拉微调器列准备时触发,可自定义列。
适用场景
- 预约排期:限制营业时间、屏蔽午休、设置 15–30 分钟间隔。
- 时间录入表单:带校验、可空时间、按用户区域设置格式。
- 班次管理:限制时间段(如早班 6AM–2PM、晚班 2PM–10PM、夜班 10PM–6AM)。
- 会议安排:屏蔽已有会议时间,使用 30 分钟或 1 小时间隔。
- 计时器应用:设置闹钟、倒计时或提醒,使用 24 小时制。
- 本地化应用:为阿拉伯语/希伯来语提供 RTL 布局与区域格式。
- 自定义时间间隔:面向交通时刻表、医疗预约等特定行业间隔。
限制
资料未提供该控件的收费、价格、平台版本要求、性能上限或已知缺陷等信息,暂未提供。