Dynamically update Min value based on another timepicker's value that's dynamically added to the page?

[Josh D Morales]

I have a collection of objects that contain a StartTime and EndTime property. Whenever an item is added to this collection, a new set of datetime pickers for each object is added, binding to the start and end date values.

What I want to be able to do is force the end date min value for each set to be 30 minutes after the associated start date.

I set this in the control binding:

    <div class="col-4">
        Start Time @schedule.DaySchedule.MinEndDateTime<br />
        <SfTimePicker TValue="DateTimeOffset" Value="@schedule.DaySchedule.StartDateTime"
                        Min="@ViewModel.OwnedListing.Dates.StartDate.Date" Max="@ViewModel.OwnedListing.Dates.EndDate.AddHours(23).AddMinutes(30).DateTime">
            <TimePickerEvents TValue="DateTimeOffset"></TimePickerEvents>
        </SfTimePicker>
    </div>
    <div class="col-4">
        End Time<br />
        <SfTimePicker TValue="DateTimeOffset" Value="@schedule.DaySchedule.EndDateTime"
        Min="schedule.DaySchedule.MinEndDateTime" Max="@ViewModel.OwnedListing.Dates.EndDate.AddHours(23).AddMinutes(30).DateTime"></SfTimePicker>
    </div>

This works on the initial load, but changing the start time does not propagate the change such that the Min value of the second picker is updated to follow.

Can this be done the way I'm doing it?

Let me know if this isn't enough context, I can try to setup a sample project to demonstrate what I'm trying to do but it'll take me some time, so i'm hoping you can see what i'm trying to do and let me know if and how it can be done, many thanks!

[Priyanka Karthikeyan]

Hi Josh,

Thank you for reaching out to us. To address your concern, we would like to direct you to the following demo link on our website:

https://blazor.syncfusion.com/demos/timepicker/time-range?theme=fluent

In this demo, we have showcased a solution that may meet your requirement. It features two timepickers, with the second one initially disabled. However, based on the value selected in the first timepicker, an additional 30 minutes will be automatically added to that time value. The resulting time will then be set as the minimum value for the second timepicker.

We believe that this approach should fulfill your requirement. However, if you find that this solution does not meet your specific needs, please do not hesitate to let us know.

Regards,

Priyanka K