Search code examples
c#xamluwptimepicker

Any time control with hours, minutes and seconds in UWP?


I want to have a time picker control where I can set hours, minutes and seconds. The default timepicker control does not have second included. What is the easiest way to have seconds value in timepicker control?


Solution

  • The built-in TimePicker indeed does not support seconds input. You could subclass TimePicker and manually extend it to support this scenario, but this might prove quite complex, because you would have to not only modify the template of the control itself, but you would have to edit the TimePickerFlyoutPresenter to support seconds input. It may even not be possible at all, and may be an overkill.

    I think the better and easier solution would be to use the TextBoxMask extension which is part of the Windows Community Toolkit. This allows you to define a custom format of a TextBox, which could look like this:

    <TextBox extensions:TextBoxMask.CustomMask="5:[0-5]"
                         extensions:TextBoxMask.Mask="99:59:59" />
    

    This TextBox will support input in the format hh:mm:ss. By default the Mask supports characters a for letters, 9 for digits 0-9 and * for any character. You can define custom mask chars using CustomMask which is what I did here to make sure the tens of minutes and seconds are limited to fifties (00-59).

    Another solution could be to create a custom control that combines the normal built-in TimePicker with a TextBox just for seconds, but I think the TextBoxMask is a better and user friendlier solution.