Grid Date Filter Value Missing Time Zone

[Aleks]

When using a date filter on a column bound to a DateTime value the value submitted is truncated and doesn't contain the time zone information.

c.Bound(x => x.Created)
.Filterable(f => f
.Operators(o => o.ForDate(d => d.Clear().IsGreaterThanOrEqualTo("On or after").IsLessThan("Before")))
.Extra(true)
.UI(GridFilterUIRole.DateTimePicker)
);

 

If the user selects 2/5/2021 12:00 PM and (for example) the users time zone is Australia/Sydney, the following is send with the request:

filter: Created~gte~datetime'2021-02-05T12-00-00'

 

As the time zone information is omitted model binding assumes this is a local time in the time zone the server is operating in.

 

See also https://github.com/telerik/kendo-ui-core/issues/5737 (which was erroneously closed) and https://github.com/telerik/kendo-ui-core/issues/5306 (which has been open for over a year).

Using:

<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2021.1.119" />
"@progress/kendo-theme-bootstrap": "^4.30.0",
"@progress/kendo-theme-default": "^4.32.0",
"@progress/kendo-ui": "^2021.1.119",

[Patrick | Technical Support Engineer, Senior]

Hi Aleks,

One way to be able to handle this issue is to consider using UTC on the server and the client.  We have a dedicated Kendo UI Knowledge Base article on the matter which will keep the data specific to UTC.

Pertaining to the feature request, I recommend following the adding your vote to this specific public feature request and following it for any future updates.  

Please let me know if you have any questions regarding the matter.

Regards,
Patrick
Progress Telerik

[Aleks]

How does this help with a filter? there is no inbound value to convert? and this only helps for displaying dates... how does it help date input?

If you re-read the question, the problem is that it already *is* treating the filter date/time values as UTC... it's displaying a local date time, but submitting a UTC one, without converting!

Re the "feature request", I think the point I was making is that it shouldn't be a "feature request" because it's obviously a bug.

Seriously... the "solution" is to add 40 something lines of JavaScript everywhere you use a date, instead of just fixing the grid to use proper date formats per the ASP.NET Core binding model, when it's an ASP.NET Core control?

[Patrick | Technical Support Engineer, Senior]

Hello Aleks,

The Kendo UI DatePicker utilizes the JavaScript Date object to hold the selected date value which, in turn, uses the local timezone based on the browser.  That being said, there are a couple of ways in which you can handle date inputs being filtered with a Kendo UI DateTimePicker for a Kendo UI Grid:

1.  Utilize the kendo.timezones.js to convert the values chosen from the Kendo UI DateTimePicker to UTC using the toLocalDate method during the Kendo UI Grid's Filter Event:

<!--Include the kendo.timezones script-->
<script src="https://kendo.cdn.telerik.com/ADD KENDO VERSION HERE/js/kendo.timezones.min.js"></script>

Grid

@(Html.Kendo().Grid<CarViewModel>()
    .Name("grid")
    .Events(e => e.Filter("onFilter"))
    //...
)

JavaScript

        function onFilter(e) {

            //Loop through each filter
            for (x = 0; x < e.filter.filters.length; x++) {

                //if the filter is an instance of Date
                if (e.filter.filters[x].value instanceof Date) {

                    //Get the current date value with local browser timezone
                    var oldValue = e.filter.filters[x].value;

                    //Convert to UTC
                    var utcDate = new Date(kendo.timezone.toLocalDate(oldValue));

                    //Alternative approach: Apply any timezone 
                    //var utcDate = new Date(kendo.timezone.apply(oldValue, "Etc/UTC"));

                    //Set the filter to the converted UTC date
                    e.filter.filters[x].value = utcDate;
                }
            }
        }

 

2.  Send the specific timezone offset during the Action Method call using the Data method to handle on the Server:

@(Html.Kendo().Grid<CarViewModel>()
    .Name("grid")
     //...
    .DataSource(ds =>
        ds.Ajax()
        .Read(r=> r.Action("AllCars", "DateTimeOffset").Data("sendTimeZone"))
     )
)

JavaScript

        function sendTimeZone(e) {

            //Get Current TimeZone OffSet
            var myDate = kendo.toString(new Date(), "zzz");

            return {
                timeZoneOffset: myDate
            }
        }

Controller

        public IActionResult AllCars([DataSourceRequest] DataSourceRequest request, string timeZoneOffset)
        {
            var result = GetData();
           
            //Handle Server Side Filtering based on timeZoneOffSet

            return Json(result.ToDataSourceResult(request));
        }

 

I hope this information helps regarding your web application.  For now, please continue to follow this feature request for future updates and add any comments pertaining to a built-in way to handle the UTC conversion in the Kendo UI Grid's DateTimePicker filter.  

Regards,
Patrick
Progress Telerik