PrimeVue DataTable日期列过滤报错：value.toDateString不是函数

环境版本 #

• npm: 9.5.1
• Vue: 3.2.45
• PrimeVue: 3.42.0

我正在尝试给PrimeVue DataTable的日期列添加过滤功能，过程中遇到了一系列问题，以下是详细情况：

日期列模板代码 #

针对日期列（判断条件为getType(header) === 'date'），我使用了如下模板代码（其他数据类型代码已省略，完整DataTable代码见文末）：

<template 
  v-if="getType(header) === 'date'" 
  #body="{ data }"
>
  {{ formatDate(data[header]) }}
</template>
<template #filter="{ filterModel }">
  <Calendar
    v-if="getType(header) === 'date'"
    v-model="filterModel.value" 
    class="p-column-filter"
    type="text"
    dateFormat="yy-mm-dd" 
    placeholder="YYYY-MM-DD"
  />
</template>

尝试过程与报错 #

第一次尝试：直接使用本地化日期格式化 #

我参考了PrimeVue高级过滤的示例逻辑，编写了几乎一致的formatDate函数（仅修改了本地化配置）：

const formatDate = (value: any) => {
  return value.toLocaleDateString('fr-CA', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  });
};

此时组件无法渲染，控制台报错：

Uncaught (in promise) TypeError: value.toLocaleDateString is not a function
    at Proxy.formatDate (QueryTable.vue:131:18)
    at QueryTable.vue:190:18
    at Object.renderFnWithContext [as fn] (runtime-core.esm-bundler.js:852:19)
    at slots.<computed> (runtime-core.esm-bundler.js:2963:38)
    at renderComponentRoot (runtime-core.esm-bundler.js:919:19)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5631:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5745:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5759:9)
    at mountComponent (runtime-core.esm-bundler.js:5541:9)

显然传入formatDate的参数不是Date对象，于是我修改了函数逻辑。

第二次尝试：先转换为Date对象再格式化 #

修改后的formatDate函数：

const formatDate = (value: any) => {
  return new Date(value).toLocaleDateString('fr-CA', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  });
};

此时表格可以正常加载，但执行过滤操作时出现报错：

Uncaught (in promise) TypeError: value.toDateString is not a function
    at dateIs (api.esm.js:209:26)
    at Proxy.executeLocalFilter (datatable.esm.js:4079:20)
    at Proxy.filter (datatable.esm.js:4020:51)
    at Proxy.processedData (datatable.esm.js:5421:37)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at get value [as value] (reactivity.esm-bundler.js:1150:39)
    at Object.get [as processedData] (runtime-core.esm-bundler.js:3470:30)
    at Proxy.render16 (datatable.esm.js:5610:25)
    at renderComponentRoot (runtime-core.esm-bundler.js:898:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5702:34)

查看报错位置的代码为return value.toDateString() === filter.toDateString();，推测API期望传入Date对象，于是再次修改函数。

第三次尝试：直接返回Date对象 #

修改后的函数：

const formatDate = (value: any) => {
  return new Date(value)
};

此时日期列显示的格式变为Mon Nov 06 2023 16:00:00 GMT-0800 (Pacific Standard Time)，但过滤时仍出现相同的报错。

求助需求 #

我认为PrimeVue文档中高级过滤的完整代码存在缺失，因为官方示例中该功能可以正常工作，所以这应该不是Bug，希望有人能帮忙解决这个问题。

完整DataTable代码 #

<DataTable
  class="p-datatable-sm"
  scrollable
  scrollHeight="flex"
  striped-rows
  paginator
  sortMode="multiple"
  removableSort
  :multiSortMeta="[{field: 'run_id', order: -1}, {field: 'sample_id', order: -1}]"
  :rows="25"
  :rows-per-page-options="[5, 10, 25, 100]"
  :value="data"
  v-model:filters="filters"
  v-on:filter="onFilter"
  filterDisplay="menu"
  stateStorage="local" 
  stateKey="filters"
  onkeypress="handle(event)"
>
  <template #empty> No data matches filters. </template>
  <Column
    v-for="header in data"
    :key="header"
    :filterField="header"
    :showClearButton="false"
    sortable
    :field="header"
    :header="ucwords(header)"
    :dataType="getType(header)"
    filterEvent="enter"
    >
    <template 
      v-if="getType(header) === 'date'" 
      #body="{ data }"
>
      {{ formatDate(data[header]) }}
    </template>
    <template 
      v-else 
      #body="{ data }"
>
      {{ data[header] }}
    </template>
    <template #filter="{ filterModel }">
      <InputText
        v-if="getType(header) === 'text'"
        v-model="filterModel.value" 
        class="p-column-filter"
        type="text" 
      />
      <Calendar
        v-else-if="getType(header) === 'date'"
        v-model="filterModel.value" 
        class="p-column-filter"
        type="text"
        dateFormat="yy-mm-dd" 
        placeholder="YYYY-MM-DD"
      />
      <InputNumber 
        v-else-if="getType(header) === 'numeric'"
        v-model="filterModel.value" 
        class="p-column-filter"
        type="number"
      />
    </template>
  </Column>
</DataTable>

内容的提问来源于stack exchange，提问作者Matthew Snyder