DateRangePicker exception with nullable DateTime

[Thomas Vasilakis]

Hi, I'm getting an exception when binding the start and end dates of the DateRangePicker using the following code:

<EjsDateRangePicker @bind-StartDate="@Filters.JobStartDate" @bind-EndDate="@Filters.JobEndDate"></EjsDateRangePicker>

My Filters object looks like:

public class JobsDashboardFilterModel
{
        public int ProjectId { get; set; }
        public int SiteId { get; set; }
        public DateTime? JobStartDate { get; set; }
        public DateTime? JobEndDate { get; set; }

}

I have an instance of this class in the @code block of my razor view. The exception I'm receiving is:

System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.ArgumentNullException: Value cannot be null.
Parameter name: accessor
  at Microsoft.AspNetCore.Components.Forms.FieldIdentifier.Create[TField] (System.Linq.Expressions.Expression`1[TDelegate] accessor) <0x4b4f480 + 0x00016> in <c0580c4b5e2c4f35b1d5e8b470509aa8>:0
  at Syncfusion.EJ2.Blazor.Calendars.EjsDateRangePicker.set_Value (System.Object value) <0x4b4ec00 + 0x00096> in <de71b9d17ff64996b29303833092d847>:0
  at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&)
  at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) <0x2dc8298 + 0x000d2> in <d9c16b0fee7344919775df5988c885d0>:0
   --- End of inner exception stack trace --- If I initialize the properties I'm binding to the exception goes away:

public DateTime? JobStartDate { get; set; } = DateTime.Now;
public DateTime? JobEndDate { get; set; } = DateTime.Now;

However, as soon as I delete values from the control it comes back. Binding the regular DatePicker using nullable dates works fine:

<EjsDatePicker @bind-Value="@Filters.JobStartDate"></EjsDatePicker>
<EjsDatePicker @bind-Value="@Filters.JobEndDate"></EjsDatePicker>

I'm using the 17.3.0.10-beta version of the Blazor Suite.

Many thanks.

[Gopi Govindasamy]

Hi Thomas,  

Greetings from Syncfusion support. 

We have checked your reported issue with shared code snippet. Based on our validation, this issue is caused due to rendering the component inside the EditForm. We need to bind the Value property to component(@bind-value) from the model class. We have prepared sample based on your requirement. We have modified the code snippet. 

@using System.ComponentModel.DataAnnotations; 

@using Syncfusion.EJ2.Blazor.Calendars; 

 

<EditForm Model="@Filters" OnValidSubmit="HandleSubmit"> 

    <EjsDateRangePicker @bind-Value="@Filters.JobValue" @bind-StartDate="@Filters.JobStartDate" @bind-EndDate="@Filters.JobEndDate"></EjsDateRangePicker> 

    <button class="e-btn" type="submit">Submit</button> 

</EditForm> 

 

@code{ 

 

    JobsDashboardFilterModel Filters = new JobsDashboardFilterModel(); 

 

    public class JobsDashboardFilterModel 

    { 

        public int ProjectId { get; set; } 

        public int SiteId { get; set; } 

        public object JobValue { get; set; } 

        public DateTime? JobStartDate { get; set; } 

        public DateTime? JobEndDate { get; set; } 

    } 

  

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/148016/ze/BlazorApp1780920352  

Regards, 

Gopi G.