Loading...
Loading...
Create and customize WPF time picker controls using Syncfusion's SfTimePicker component. Use this skill whenever the user needs to implement time selection UI, handle time input values, format time display, customize time selector behavior, or style time picker controls. Triggers on: time picker, SfTimePicker, time selection, time input field, time formatting, time value binding, time selector customization, WPF time control, time editing, hourly/minute selection.
npx skill4agent add syncfusion/wpf-ui-components-skills syncfusion-wpf-timepicker<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
<Grid>
<!-- Basic time picker -->
<syncfusion:SfTimePicker x:Name="timePicker"
Width="200"
Value="04:30:00"
ValueChanged="TimePicker_ValueChanged"/>
</Grid>
</Window>using Syncfusion.Windows.Controls.Input;
SfTimePicker timePicker = new SfTimePicker();
timePicker.Value = new TimeSpan(14, 30, 00); // 2:30 PM
timePicker.ValueChanged += (d, e) =>
Console.WriteLine($"Time changed to: {e.NewValue}");<syncfusion:SfTimePicker FormatString="HH:mm:ss"
SelectorFormatString="HH:mm"/><syncfusion:SfTimePicker AllowNull="True"
Value="{x:Null}"
Watermark="Select a time"/><syncfusion:SfTimePicker AllowInlineEditing="False"
ShowDropDownButton="False"
Value="09:00:00"/><syncfusion:SfTimePicker SelectorItemWidth="60"
SelectorItemHeight="60"
SelectorItemSpacing="20"/>| Property | Default | Purpose |
|---|---|---|
| Current system time | Get/set the selected time as TimeSpan |
| "h:mm tt" | Display format (12-hr/24-hr) |
| "h:mm tt" | Format for time picker cells |
| false | Enable null value support |
| — | Placeholder text when Value is null |
| true | Allow direct text editing |
| true | Show dropdown button |
| false | Update value when focus lost |
| 30 | Width of selector cells (pixels) |
| 30 | Height of selector cells (pixels) |
| 4 | Space between selector items (pixels) |
| — | Text color |
| — | Control background color |
| — | Selected item highlight color |
| LeftToRight | Support RTL layouts |