SfDatePicker ValueChange

[Thijs van Rijswijk]

Hi,

I have a page with two DatePickers.

I use them as a filter on a SfGrid.

It seems ValueChange only triggers when i click outside the component.

Is there an other event that triggers when i am changing the date and not leaving the component.

.razor

@inherits DateFromComponentBase

@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?"

               Value="DateFromComponentState.GetCurrentDate()"

               Format='dd-MM-yyyy'

               Placeholder='Selecteer..'>

    <DatePickerEvents TValue="DateTime?"

                      ValueChange="DateChanged" />

</SfDatePicker>

.base

using Microsoft.AspNetCore.Components;

using Microsoft.JSInterop;

using StbTime.Web.Admin.SessionState;

using Syncfusion.Blazor;

using Syncfusion.Blazor.Calendars;

using System;

namespace StbTime.Web.Admin.Components

{

    public class DateFromComponentBase : ComponentBase, IDisposable

    {

        [Inject]

        public DateFromComponentState DateFromComponentState { get; set; }

        [Inject]

        IJSRuntime JsRuntime { get; set; }

        protected override void OnInitialized()

        {

        }

        public void DateChanged(ChangedEventArgs<DateTime?> args)

        {

//            if (args.IsInteracted == true)

//            {

                DateTime? date = args.Value;

                if (date != null)

                {

                    DateFromComponentState.SetCurrentDate(date.Value);

                }

//            }

        }

        void IDisposable.Dispose()

        {

        }

    }

}

.state

using System;

namespace StbTime.Web.Admin.SessionState

{

    public class DateFromComponentState

    {

        private DateTime _currentDate = DateTime.Now.AddDays(-7).Date;

        public event EventHandler StateChanged;

        public DateTime GetCurrentDate()

        {

            return _currentDate;

        }

        public void SetCurrentDate(DateTime paramDate)

        {

            _currentDate = paramDate;

            StateHasChanged();

        }

        public void ResetCurrentDate()

        {

            _currentDate = DateTime.Now;

            StateHasChanged();

        }

        private void StateHasChanged()

        {

            StateChanged?.Invoke(this, EventArgs.Empty);

        }

    }

}

Best regards.

Thijs van Rijswijk

[Sureshkumar P]

Hi Thijs, 

 

Greetings from Syncfusion support. 

 

Based on your shared information, we suspect that you have change the data value in the input element and want to trigger the change event before leaving the focus. We suggest you press enter key after change the date input value. This is default behavior of the input component the change event will triggered after focusing out or pressing enter key after change the value in the date input element.  

 

Regards, 

Sureshkumar P