SuperAPI AI 工具集

syncfusion-winui-time-picker

前端与建站

查看项目

更新于 10-16 02:06

技能介绍

用途

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 布局与区域格式。
  • 自定义时间间隔:面向交通时刻表、医疗预约等特定行业间隔。

限制

资料未提供该控件的收费、价格、平台版本要求、性能上限或已知缺陷等信息,暂未提供。