1. Feedback
  2. Blazor
  3. 19158

Welcome to the Blazor feedback portal. We’re happy you’re here! If you have feedback on how to improve the Blazor, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

The value does not update when using two way binding after focusout the timepicker component

When set the timepicker hour dynamically based on some condition.  the value does not update when using two-way binding


Sample code :

<div>

    First timepicker:

    <SfTimePicker
TValue="DateTime?"
Placeholder="00:00"
Step=30
Format="HH:mm"
@bind-Value="@now"
Min="@timePickerMinimum"
Max="@timePickerMaximum"
StrictMode="false">

        <TimePickerEvents
TValue="DateTime?"
ValueChange="OnFirstChange"></TimePickerEvents>

    </SfTimePicker>

</div>

<div>

    Second timepicker:

    <SfTimePicker
TValue="DateTime?"
PlaceHolder="00:00"
Step=30
Format="HH:mm"
@bind-Value="@secondNow"
Min="@secondMin"
Max="@timePickerMaximum"
StrictMode="false">

        <TimePickerEvents
TValue="DateTime?"
ValueChange="OnSecondChange"></TimePickerEvents>

    </SfTimePicker>

</div>


@code
{

    private DateTime? now { get; set; } = DateTime.Now;

    private DateTime? secondNow { get; set; } = DateTime.Now.AddHours(1);


    private DateTime secondMin { get; set; }


    private DateTime timePickerMinimum = new
DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 7, 0, 0); // 7 AM

    private DateTime timePickerMaximum = new
DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 18, 0, 0); // 6 PM


    protected override void OnInitialized()

    {

        this.secondMin = System.Convert.ToDateTime(this.now);

    }


    public void OnFirstChange(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)

    {

        if (args.Value == null)

            return;


        // now = (DateTime)args.Value;


        // Issue: Line below causes method OnSecondChange to go into endless loop

        if (secondNow < args.Value)

        {

            secondNow = System.Convert.ToDateTime(this.now).AddHours(1);

        }

    }


    public void OnSecondChange(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)

    {

        if (args.Value == null)

            return;


        Console.WriteLine("Hello from OnSecondChange! " + secondNow.ToString());


        if (args.Value < now) {

            secondNow = System.Convert.ToDateTime(this.now).AddHours(1);

            StateHasChanged();

        }

    }

}


Replication procedure:

1. Run sample, notice values of two timepickers - second timepicker should be 1 hour ahead of first one.

2. Manually enter a time that is lower than the first timepicker into second timepicker, press ENTER.

3. Result: Value of second timepicker should remain one hour ahead of first timepicker.

4. Now, repeat step 2 (manually enter time that is lower than first timepicker into second timepicker), this time do not press ENTER - just click somewhere on page.

5. Result: Value has changed to what you entered although event handler code changed it. This is not desirable!