PrimeVue DataTable 列排序不適用於日期

Question

我有一個 DataTable，如下所示：

<DataTable
  :rows = "5"
  :value = "apiItems"
>
  <Column
    :field="initialDate"
    :header="Initial Date"
    :sortable="true"
    />
    
    <Column
    :field="finishDate"
    :header="Finish Date"
    :sortable="true"
    />
</DataTable>

initialDate 和 finishDate 都是從 API 調用中提取的數據字段，看起來像這樣：“08/21/2022 11:43:12”

當我嘗試對這些列進行排序時，它們不會按實際日期（這是我需要的）排序，而只是字符串中的第一個數字（即月份）

它能做什么：

Ascending:
"08/22/2021 11:43:12"
"07/01/2022 12:01:09"

我需要的：

Ascending:
"07/01/2022 12:01:09"
"08/22/2021 11:43:12"

我嘗試過的：嘗試將已經存在的日期轉換為 JS 數據 object，例如：new Date(initialDate).toLocaleString()。 仍然不能正確排序。

感謝您的協助。

Answer 1

要對日期進行排序，您必須能夠比較它們，最好的方法是將它們轉換為時間戳（自 1970 年 1 月 1 日 00:00:00 UTC 以來經過的毫秒數） 。

const date1 = new Date('08/22/2021 11:43:12')
const date2 = new Date('07/01/2022 12:01:09')

您可以使用getTime()方法或一元加號 (+) 運算符檢索日期 object的時間戳。

console.log(date1.getTime()) // 1629603792000
console.log(+date2) // 1656648069000

升序排序

使用sort()方法進行排序非常容易。

console.log([date1, date2].sort((a,b) => +b - +a))

---

完整示例

 const date1 = new Date('08/22/2021 11:43:12') const date2 = new Date('07/01/2022 12:01:09') console.log([date1, date2].sort((a,b) => +b - +a))