Date Time

Time
Default template and specific properties
Date as String
Suggested Links

Use this column type to display date or date times.

qgrid
   .model()
   .data({
      columns: [
         { key: 'birthday', type: 'date' }
      ]
   });

Time

Use number type to display time values in a specific format.

qgrid
   .model()
   .data({
      columns: [
         { key: 'alarm', type: 'time' }
      ]
   });

Default template and specific properties

Use qGridDate directive to display a date according to the locale rules.

<q-grid>
   <ng-template qGridColumnBody="birthday" let-$cell>
      {{$cell.label | qGridDate: $cell.column.format}}
   </ng-template>
</q-grid>

Date as String

Usually data from http request goes directly to the q-grid, in this case if column is marked or generated as date only ISO 8601 format is supported.

YYYY-MM-DD - 2017-08-10
YYYY-MM-DDTHH:mm - 2017-08-10T15:20
YYYY-MM-DDTHH:mm - 2017-08-10T15:20:23
YYYY-MM-DDTHH:mm - 2017-08-10T15:20:23.738Z

If it’s not possible to lead data contract to ISO 8601 and there is no chance to to convert string to date object before putting it to q-grid column value property can be overridden.

qgrid
   .model()
   .data({
      columns: [
         { key: 'birthday', type: 'date', value: row => new Date(row.birthdayString) }
      ]
   });