Setting min/max value for EditType.DateTimePickerEdit in grid

[Michael Lambert]

How do I set the Min Date/Max Date values for a EditType.DateTimePickerEdit in the grid:

        <GridColumn Field=@nameof(TimeSheets.DateStart) HeaderText="Start" Width="70" Format="yMd" TextAlign="TextAlign.Right" EditType="EditType.DateTimePickerEdit" Type="ColumnType.Date"  ValidationRules="@(new { required = true })"></GridColumn>

Thanks,

Mike

[Vignesh Natarajan]

Hi Michael,  

Greetings from Syncfusion support.  

Query: “How do I set the Min Date/Max Date values for a EditType.DateTimePickerEdit in the grid” 

We suggest you to achieve your requirement using Edit params feature of Grid. You can customize the default edit Types using Edit property of GridColumn. Refer the below code example  

@using Syncfusion.EJ2.Blazor.Calendars 

 

<EjsGrid TValue="Order" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })"> 

    <GridColumns> 

    .        .        .     .           .         .  

    <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Date" EditType="EditType.DateTimePickerEdit" Edit="@DateParams" Width="150"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

@code{ 

    public static List<Order> Orders { get; set; } 

    public object DateParams = new 

    { 

@@params = new DateTimePickerModel { Max = DateTime.Now, Min = DateTime.Now.AddDays(-100) } 

}; 

} 

Note: to get the DateTimePicker model, you need refer the Syncfusion Calendars as highlighted above 

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/editing/?no-cache=1#cell-edit-type-and-its-params  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.  

[Michael Lambert]

That sorta worked.  It limited the selection in the dropdown, but the user can still enter by hand an invalid date.  How do I get validation for that?

[Vignesh Natarajan]

Hi Michael,  

Query: “It limited the selection in the dropdown, but the user can still enter by hand an invalid date” 

 

We suggest you to achieve your requirement using StrictMode property of DateTimePicker. Enabling this property will allow the user to type the valid date and time between Min / Max values. If the entered value is invalid, the component stay with previous value. Else, if the datetime is out of range, then component will set the date time to the Min/Max value. 

Refer the below code example  

public object DateParams = new 

    { 

@@params = new DateTimePickerModel { Max = DateTime.Now, Min = DateTime.Now.AddDays(-100),StrictMode = true } 

}; 

  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/datetimepicker/strict-mode/  

Above solution will prevent the user from saving the Invalid / out of range Date values, So, kindly confirm whether you want to display validation in column if the user type wrong values.  

Regards, 

Vignesh Natarajan. 

[Michael Lambert]

So I just updated to 17.4.54 from the Beta, now I get this error on this line:

     Error CS0305 Using the generic type 'DateTimePickerModel<T>' requires 1 type arguments

       public object DateParams = new {@@params = new DateTimePickerModel { Max = DateTime.Now, Min = DateTime.Now.AddDays(-40), StrictMode = true }};

<GridColumns>

        <GridColumn Field=@nameof(TimeSheets.Description) MaxWidth="200" HeaderText="Description" Width="120" ValidationRules="@(new { required= true, maxLength=50})"></GridColumn>
        <GridColumn Field=@nameof(TimeSheets.DateStart) HeaderText="Start" Width="70" CustomFormat="@(new { type ="date", format="MM/dd/yyyy HH:mm" })" TextAlign="TextAlign.Right" Edit="@DateParams" EditType="EditType.DateTimePickerEdit" Type="ColumnType.Date" ValidationRules="@(new { required = true })"></GridColumn>
…..

Obviously something changed between releases.  How do we now set the min/max of a DateTimePicker in a Grid?

Thanks,

Mike

[Vignesh Natarajan]

Hi Michael,  

 

Thanks for contacting Syncfusion support.  

 

Query1: “So I just updated to 17.4.54 from the Beta, now I get this error on this line && How do we now set the min/max of a DateTimePicker in a Grid” 

 

In our 17.4.0.39, we have some major changes in our components and DateTimePicker components require TValue (its type) property to function properly. Please find the release notes regarding the same from below  

 

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.4.39/#common  

 

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.4.39/#datetimepicker  

 

So kindly modify the code as below in your application.  

 

 public object DateParams = new    {@@params = new DateTimePickerModel<DateTime?> { Max = DateTime.Now, Min = DateTime.Now.AddDays(-100), StrictMode = true }};

 

 

For your convenience we have prepared a sample using 17.4.0.54v which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/148162/ze/Editing1165166197  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan. 

[Michael Lambert]

Worked Thanks!

[Vignesh Natarajan]

Hi Michael, 

Thanks for the update.  

We are glad to hear that you have resolved your query. 

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.