Use TimeSpan with Min Max

[Alexander Kuhlmann]

Hello,

I need to use a TimePicker with a TimeSpan Value. 

All entered Values should be ok, but in the DropdownPopup I just want to show some specific values, e.g. from 00:15 till 02:00 with 15 minute steps.

How can I realize this?

best rega  

[Yohapuja Selvakumaran]

Hi Alexander,

If you would like to display the time with a 15-minute interval, you can easily customize it using the Step property. Please find the sample code below for your reference:

Sample: https://blazorplayground.syncfusion.com/VDhItLWmfYDRREGP

For more details, please refer to the API documentation here:

API Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step

Regards,

Yohapuja S

[Alexander Kuhlmann]

HI  Yohapuja,

yes, I know the Step property, this is not the problem.

I want to show just these steps: 00:15, 00:30, 00:45, 01:00, 01:15, 01:30, 01:45, 02:00
But if I use the Min and May properties for this, the Input turns red, if I enter something outside of this range.

So I just want to modify the entries in the PopupDropdown without limiting the whole input.

And, if this is important: I need to use a TimeSpan as Value.

Regards,

Alex

[Yohapuja Selvakumaran]

Hi Alexander,

You can achieve this by setting the Min and Max properties in the TimePicker component to restrict the displayed time range inside the time picker popup. Additionally, you can set the Format property to display the time in 24-hour format.

<SfTimePicker TValue="DateTime?" Step="15" Min="MinTime" Max="MaxTime" Format="HH:mm"></SfTimePicker>

@code {

    private DateTime MinTime = DateTime.Today.AddMinutes(15); // 00:15

    private DateTime MaxTime = DateTime.Today.AddHours(2); // 02:00

}

Please find the sample for your reference,

Sample: https://blazorplayground.syncfusion.com/LjBSjVWlpOEvoqir

API Documentaion

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Format

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Max

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Min

Regards,

Yohapuja S