Quasar date.formatDate() Function Not Formatting Dates In Q-Table Component

Hello All,

When formatting date columns in Quasar table (QTable) the accepted solution is to use the date.formatDate() function and supply the parameters with the actual value and the format type such as below code.

  columns: [
  //More Columns here...
  {
	name: "startTime",
	label: "Start Time",
	align: "right",
	sortable: true,
	field: row => row.startTime,
	format: val => date.formatDate(val, "DD-MMM-YYYY hh:mm:ss A"),
  }]

And then render the columns to the table component.

<q-table
	:data="activeUsers"
	:columns="columns"
	:separator="separator"
	table-header-class="bg-cts-purple text-white"
	:rows-per-page-options="[10, 20, 30, 0]"
	:filter="filter"
	:filter-method="filterActiveUsers"
  >
  <template #body="props">
	<q-tr :props="props">
	  <q-td key="operatorName" :props="props">{{props.row.operatorName}}</q-td>
	  <q-td key="trackingEvent" :props="props">{{props.row.trackingEvent}}</q-td>
	  <q-td key="workstation" :props="props">{{props.row.workstation}}</q-td>
	  <q-td key="isProduction" :props="props">{{props.row.isProduction}}</q-td>
	  <q-td key="startTime" :props="props">{{props.row.startTime}}</q-td>
	</q-tr>
  </template>
</q-table>

As you can see on the screenshot of the output, the date is not formatted with the required style.

After doing some research and experiments, there are a couple of solutions to change the table structure. First is to populate the table directly without the template section.

<q-table
	:data="activeUsers"
	:columns="columns"
	:separator="separator"
	table-header-class="bg-cts-purple text-white"
	:rows-per-page-options="[10, 20, 30, 0]"
	:filter="filter"
	:filter-method="filterActiveUsers"
  >
</q-table>

The other option is to use the template section but instead of mapping each column to a <q-td> element, I have to loop through the props using v-for directive that shows the column value.

<q-table
	:data="activeUsers"
	:columns="columns"
	:separator="separator"
	table-header-class="bg-cts-purple text-white"
	:rows-per-page-options="[10, 20, 30, 0]"
	:filter="filter"
	:filter-method="filterActiveUsers"
  >
  <template #body="props">
	<q-tr :props="props">
	  <q-td v-for="col in props.cols" :key="col.name" :props="props">
		  {{ col.value }}
	  </q-td>
	</q-tr>
  </template>
</q-table>

After applying any of those changes, the date.formatDate() function works as expected. The Quasar framework of the project that we are working right now is version 1x and Vue.js 2.

Cheers!