Blazor SfDatePicker: How to get user input event?

[Liero]

Scenario:

I need to perform some action when user selects a date (or types the date in the input) in date picker.

Problem:

OnChange event is not called when user selects a date by clicking on calendar.

ValueChanged event is called also when the property bound to Value is changed from code. Without user interaction.


<SfDatePicker TValue="DateTime?"

              Value="@MyDate"

              ValueChanged="SetMyDate"

              Format="d.M.yyyy"

              Width="10em" />

<select @onchange="args => SetPeriod((string)args.Value!)"

        value="@Period"

        class="form-control w-auto">

    <option value="" hidden></option>

    <option value="Day">Dnes</option>

    <option value="Week">Týždeň</option>

    <option value="Month">Mesiac</option>

    <option value="Year">Rok</option>

</select>

@code {

    [Parameter]

    public DateTime? MyDate { get; set; }

    protected string Period = "";

    protected sync Task SetMyDate(DateTime? value)

    {

        SetMyDate = value;

        Period = string.Empty;

        await FromChanged.InvokeAsync(value);

    }

    protected sync Task SetPeriod(string value)

    {

        Period = value;

        SetMyDate = DateTime.Now; //this fires SfDatePicker.ValueChanged event which in turn sets Period back to "";

    } 

}

[Ponmani Murugaiyan]

Hi Liero, 

Greetings from Syncfusion support. 

We suspect that you are using the Syncfusion lower version. Kindly upgrade to the latest version and we have prepared sample with the provided code snippet. 

Nuget: https://www.nuget.org/packages/Syncfusion.Blazor/18.3.0.42  

1. On select the value from the calendar or Type the date in the input, ValueChange event will be fired and you can perform your action to meet your requirement.
2. OnChange event will be triggered only when the select tag value is changed.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Calendar-2006720575  

 

Kindly check with the above suggestion. If we misunderstood the query, please elaborate on your requirement to provide you the exact solution at earliest. 

Regards, 

Ponmani M 

[Patrick]

I get a nullreference error when I try to manage @bind-Value using the ValueChange event.

[Sureshkumar P]

Hi Patrick, 

 

We have validated the reported scenario in our datepicker component. But the reported issue not replicated from our end.  

Please find the code example here: 

<SfDatePicker TValue="DateTime?" @bind-Value="DateValue"> 

                        <DatePickerEvents TValue="DateTime?" ValueChange="@changeEvent"></DatePickerEvents> 

                    </SfDatePicker> 

 

@code { 

    public DateTime? DateValue { get; set; }  

 

    void changeEvent(ChangedEventArgs<DateTime?> args) 

    { 

        DateValue = DateTime.Now; 

    } 

} 

 

Find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePickerGL1418250567  

 

If still you have faced the issue, please replicate the same issue in the above attached sample and revert us with detailed issue replication procedure. These details will help us to provide exact solution as earlier as possible. 

Regards, 

Sureshkumar P 

[Sven G]

Hi  Sureshkumar ,

it seems this no longer works with v22.2.12

Do you suggest a new solution?

thanks

[Kokila Poovendran]

Hi Sven G,

Thank you for reaching out regarding the issue you encountered with version v22.2.12.

We've thoroughly reviewed your concern and attempted to replicate the issue on our end. However, we couldn't reproduce the problem you mentioned. To assist you more effectively, could you please provide us with a sample that reproduces the issue along with the steps to replicate it? This will help us understand the problem better and provide you with a more accurate solution.

In the meantime, you can refer to the sample provided for your reference: https://blazorplayground.syncfusion.com/rtrfjWVkTtwJnXAA

Thank you for your cooperation and understanding.

Regards,
Kokila Poovendran.