DatePicker on a RCL (Razor Class Library) not displaying the date properly.

[Roberto]

I am having an unexpected issue using the DatePicker when I enter a date manually the date dissapears after I lost focus. When a date is selected from the calendar the date is not displayed on the textbox. 

I included as much information on the files provided and I am using VS 2022

Attachment: Files_a3b12926.zip

[Buvana Sathasivam]

Hi Roberto,

Currently, we are validating your reported query. We will update you with further details on or before August 16, 2022.

Regards,

Buvana S

[UdhayaKumar Duraisamy]

Hi Roberto,

Due to complexity, We are still validating the reported issue. We will update the further details in two business days (18^th August 2022).

Regards,

Udhaya Kumar D

[Buvana Sathasivam]

Hi Roberto,

Thank you for your patience.

We have checked your shared code. To solve your problem, you can use two-way binding Value attribute to the Index.razor page and included ValueChanged to reflect the two-way binding variable at the CmpDatePicker.razor page. Please find the below code and sample for your reference.

Index.razor

@using Syncfusion.Blazor.Calendars

<CmpDatePicker @bind-Value='@SelectedDate' OnChange='@OnChangeHandler'></CmpDatePicker>

 

       @code {

             public DateTime? SelectedDate { get; set; }

             public string SelectedValue { get; set; } = string.Empty;

 

             public void OnChangeHandler(ChangedEventArgs<DateTime?> args)

             {

                    if (args.Value != null)

                    {

                           this.SelectedValue = args.Value.Value.ToString("MM/dd/yyyy");

                    }

             }

       }

CmpDatePicker.razor

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.Inputs;

@using System.Linq.Expressions;

@using System.ComponentModel.DataAnnotations

@using System.Reflection

       <SfDatePicker

              TValue="DateTime?"

             Value="@Value"

             Min='@MinDate'

             Max='@MaxDate'

             Width="145px"

             ValueChanged="ValueChanged" ValueExpression="@ValueExpression"

       >

             <DatePickerEvents TValue="DateTime?" ValueChange="OnChangeHandler"></DatePickerEvents>

       </SfDatePicker>

 

       @code {

             [Parameter]

             public DateTime MinDate { get; set; }

 

             [Parameter]

             public DateTime MaxDate { get; set; }

 

             [Parameter]

             public DateTime? Value { get; set; }

 

           [Parameter]

        public Expression<Func<DateTime?>> ValueExpression { get; set; }

 

        [Parameter]

        public EventCallback<DateTime?> ValueChanged { get; set; }

 

             [Parameter]

             public EventCallback<ChangedEventArgs<DateTime?>> OnChange { get; set; }

 

             protected override void OnInitialized()

             {

                    base.OnInitialized();

 

                    if (DateTime.Compare(MaxDate, new DateTime(1, 1, 1, 0, 0, 0)) == 0)

                    {

                           MaxDate = new DateTime(3000, 1, 1, 12, 0, 0);

                    }

             }

 

             public void OnChangeHandler(ChangedEventArgs<DateTime?> args)

             {

                    if (OnChange.HasDelegate)

                    {

                           OnChange.InvokeAsync(args);

                    }

             }

       }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDatePicker72552514

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Buvana S