1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Customize datepickeredit in Grid

Customize datepickeredit in Grid

Hello!

I have a grid that takes in dates. I have two questions:

1) Is there any way to set the payload from the RemoteSaveAdaptor to actually be a date only instead of a date with T00:00:00z attached at the end?
Image_5173_1743787344988

2) Can I set the start and depth of datepickeredit somehow? Or can I force the selection of only day 1 in each month? I only want the user to pick the year and month. The date is always going to be the first -> e.g. 4/1/2025, 5/1/2025, 6/1/2025, etc. This is my grid:

<ejs-grid id="CurrentGrid"

            dataSource="@Model.DivisionDistributionHistory"

            allowTextWrap="true"

            gridLines="Horizontal"

            toolbar="@(new List<string>() { "Add", "Delete" })">

    <e-grid-loadingIndicator indicatorType="Shimmer"></e-grid-loadingIndicator>

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true"></e-grid-editSettings>

    <e-data-manager adaptor="RemoteSaveAdaptor" insertUrl="/Supplier/AddDistribution" updateUrl="/Supplier/UpdateDistribution" removeUrl="/Supplier/DeleteDistribution"></e-data-manager>

    <e-grid-columns>

        <e-grid-column

            field="SupplierDivisionDistributionId"

            headerText="SupplierDivisionDistributionId"

            isPrimaryKey="true"

            defaultValue="0"

            allowEditing="false"

            visible="false">

        </e-grid-column>

        <e-grid-column

            field="SupplierId"

            headerText="SupplierId"

            allowEditing="false"

            defaultValue="@Model.Supplier.SupplierId"

            visible="false">

        </e-grid-column>

        <e-grid-column

            field="DivisionId"

            headerText="Org#"

            editType="numericedit">

        </e-grid-column>

        <e-grid-column

            field="Distribution"

            headerText="Distribution"

            editType="numericedit">

        </e-grid-column>

        <e-grid-column

            field="StartDate"

            headerText="Start Date"

            editType="datepickeredit"

            type="date"

            format="MM-dd-yyyy"

            defaultValue="DateOnly.FromDateTime(DateTime.Now)">

        </e-grid-column>

        <e-grid-column

            field="EndDate"

            headerText="End Date"

            editType="datepickeredit"

            type="date"

            format="MM-dd-yyyy"

            defaultValue="null">

        </e-grid-column>

    </e-grid-columns>

</ejs-grid>

 


1 Reply
SM Saranya Murugesan Syncfusion Team April 9, 2025 09:50 AM UTC

Hi Jessica,


Greetings from Syncfusion support


Query#: date only instead of a date with T00:00:00z attached at the end.


Based on your query, we could see that you like to send only the date value instead of the default ISO format T00:00:00z. We would like to inform you that in our Grid, you can send only the date string by using DateOnly type for the date column in our model class and also set the type as dateonly in the Grid date column definition. Please refer the below code example for more information.


HomeController.cs

 

public class Orders

{

    public Orders()

    {

    }

 

    public Orders(long orderId, string customerId, int employeeId, double freight, DateOnly? orderDate

)

    {

        OrderID = orderId;

        CustomerID = customerId;

        EmployeeID = employeeId;

        Freight = freight;

        OrderDate = orderDate;

    }

 

    public static List<Orders> getAllRecords()

    {

        if (order.Count == 0)

        {

            int code = 10000;

            for (int i = 1; i <= 20; i++)

            {

                order.Add(new Orders(code + 1, "CUST" + i, i, 2.3 * i, new DateOnly(2025, 12, 10)));

                order.Add(new Orders(code + 2, "CUST" + i, i, 2.3 * i, new DateOnly(2025, 04, 04)));

               

                code += 5;

            }

        }

        return order;

    }

 

    public long OrderID { get; set; }

    [Required]

    public string CustomerID { get; set; }

    public int EmployeeID { get; set; }

    public double Freight { get; set; }

    public DateOnly? OrderDate { get; set; }

 

}

 

Index.cshtml

 

<ejs-grid id="Grid" allowPaging=true allowResizing="true" height="400" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick" allowSorting="true">

   

    <e-grid-columns>

        .  .  .  .   .  .  .  .  .

        .  .  .  .   .  .  .  .  .

        .  .  .  .   .  .  .  .  .

        <e-grid-column field="OrderDate" headerText="Order Date" editType="datepickeredit" format="MM-dd-yyyy" type="dateonly" textAlign="Right" width="100"></e-grid-column>

        .  .  .  .   .  .  .  .  .

        .  .  .  .   .  .  .  .  .

        .  .  .  .   .  .  .  .  .

    </e-grid-columns>

</ejs-grid>

 


Query#: Can I set the start and depth of datepickeredit somehow.


Based on your query it appears that you like to select only year and month and like to prefer to always set the selected date to the first day of the selected month, you can achieve this by customizing the DatePicker component. The behavior of the editor component can be fine-tuned through the columns->edit->params property. Please refer the below documentation for more information.


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#customize-datepicker-component-of-datepickeredit-type


You can set the start and depth property as year and modifying the value in the change event using the setDate method to set the date as one, as shown in the following code snippet and video demo:


Index.cshtml

 

<ejs-grid id="Grid" allowPaging=true allowResizing="true" height="400" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick" allowSorting="true">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>

    <e-grid-columns>

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

        <e-grid-column field="OrderDate" headerText="Order Date" edit="@(new { @params = new Syncfusion.EJ2.Calendars.DatePicker() { Change="change", ShowClearButton = false, ShowTodayButton=false, Start=Syncfusion.EJ2.Calendars.CalendarView.Year, Depth=Syncfusion.EJ2.Calendars.CalendarView.Year, Format="MM-dd-yyyy" } })" editType="datepickeredit" format="MM-dd-yyyy" type="dateonly" textAlign="Right" width="100"></e-grid-column>

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .  .

    </e-grid-columns>

</ejs-grid>

 

<script>

              function change(e) { //change event of datepicker component

              if (e.value != null) {

                var date = new Date(e.value);

                date.setDate(1);

                this.value = date;

              }

              }

</script>