Nullable datetime with FormEditorType.DateTimePicker

[Yongkee Cho]

Nullable DateTime is shown as a TextBox even though I specified as FormEditorType.DateTimePicker.

<FormItem Field="@nameof(Content.Id)" ColumnSpan="3" />
<FormItem Field="@nameof(Content.Name)" ColumnSpan="3" />
<FormItem Field="@nameof(Content.ReceivedAt)" Placeholder="Received At" EditorType="FormEditorType.DateTimePicker" ColumnSpan="3" />
<FormItem Field="@nameof(Content.Description)" EditorType="FormEditorType.TextArea" ColumnSpan="3" />

public class Material
{
    public string Id { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }

    public DateTime? ReceivedAt { get; set; }
}

[Yohapuja Selvakumaran]

Hi Yongkee Cho,

Thank you for reaching out to us.

We have reviewed the issue you mentioned and tested the behavior using a DateTime? (nullable) field with FormEditorType.DateTimePicker. In our validation, the DateTimePicker is rendered correctly within the DataForm.

Please refer to the working sample below for your reference:

Sample: https://blazorplayground.syncfusion.com/embed/LjVeXyWpTdhJCmOR?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

For more information, you can refer to the documentation below below,

Documentation: Form Items in Blazor DataForm Component | Syncfusion

Additionally, please ensure that the necessary scripts and styles are correctly referenced in your project. Below is the required configuration for App.razor based on the Syncfusion package you are using:

1. If using the Common package:

   
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

 

1. If using the Individual package:

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

 

 

Please verify that these references are correctly included in your project.

If the issue persists, kindly share more details about your implementation, such as a sample project or code snippet that replicates the issue and video illustration of the issue you are facing.

Regards,

Yohapuja S