UTC date format and Kendo grid column

[Bhavya]

Hi,

 

The grid is having a date column as follows: -
<kendo-grid-column field="RequestedDate" title="Requested Date"filter="date" format="{0:d}" width="200" [headerStyle]="{'font-weight' : 'bold'}" [style]="{'font-size': '12px'}">
                <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
                    <kendo-grid-date-filter-menu [column]="column"
[filter]="filter"
                                                   [filterService]="filterService"
                                                   operator="eq">
                        <kendo-filter-eq-operator></kendo-filter-eq-operator>
                        <kendo-filter-neq-operator></kendo-filter-neq-operator>
                        <kendo-filter-gte-operator></kendo-filter-gte-operator>
                        <kendo-filter-lte-operator></kendo-filter-lte-operator>
                    </kendo-grid-date-filter-menu>
                </ng-template>
            </kendo-grid-column>


The, rendered grid shows the date coming from server side as follows :



As can be seen in the html markup that a format  {0:d} has been written , but it’s not showing date in that format.
Our expectation is in MM/DD/YYYY HH:MM:SS  format.

Please help

[Svet]

Hi Bhavya,

Thank you for the provided sample plunker.

It looks like the data is coming from the server as a string - '1995-12-17T03:24:00'. We need to convert this string to a JavaScript Date before we can manipulate its format. Check the following article from MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Basically, we need to do the following for all dates

var date = new Date('1995-12-17T03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

We could perform this conversion in the map method when we subscribe to the observable that returns the data from the server. The code should be something like the following:

this.service.subscribe().map((res)=>{
res.map(product => {
      product.SomeDate= new Date(product.SomeDate)
      return product
    })
return res
})

I hope this helps. Please let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Rajesh]

Hi,

This format is working (dd/MM/yyyy HH:MM:SS) but sorting not working.

[Svet]

Hi Rajesh,

When sorting or filtering Dates they will be compared to the millisecond. Selecting a Date from the filter UI for a column selects a UTC Date with an offset equal to the local time zone of the browser and time set to midnight.

So please make sure that the Dates in the Grid don't have seconds or milliseconds that could cause the undesired behavior.

I hope this points you in the right direction.