Prime react dataTable 排序不适用于日期答案

【问题标题】：Prime react dataTable sorting is not working with DatesPrime react dataTable 排序不适用于日期
【发布时间】：2021-09-28 03:06:27
【问题描述】：

日期排序不正确，如何在以下示例中对日期进行排序，排序是按天而不是按月或按年进行的。我需要先按年份排序，然后是下个月，然后是日期。


<DataTable value={item.task}
ref={dt}                                        
selectionMode="single"
globalFilter={globalFilter}
rowClassName={classRow}
selection={selectedProduct} onSelectionChange={e => setSelectedProduct(e.value)}
footer={footer}
removableSort
dataKey="id" paginator={pagination} rows={paginationRows}
onColReorder={onColReorder}
>

{phaseColumns && phaseColumns.map(col=> {
return <Column 
key={col.value} 
columnKey={col.value} 
field={col.value} 
header={col.text} 
sortable  
sortOrder="-1"
/>
})}

</DataTable>

【问题讨论】：

在item.task里面你有真正的JS约会吗？
@robert ....是的，在 item.task 中，我已经传递了数据，包括字符串“DD/MM/YYYY”格式的日期
如果您有该格式的日期，这可能就是问题所在，它仍然是字符串而不是日期。可以分享一些数据吗？还是调试截图？

标签： javascript reactjs sorting primereact

【解决方案1】：

我也有同样的问题。要正确排序日期，您必须在要添加到表中的数据中创建一个 Date 对象的新实例（此代码应该可以工作）

 dateTemplate(rowData, field) {
    return rowData[field.field].toLocaleDateString(navigator.language, {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
    })

}

我的代码中唯一不同的是我指定了哪个 dataType 具有该列，但它不起作用。如果我按其他列进行多重排序，则效果很好。

this.state.columns.map((item) => {
                            if (item.datatype == "date" || item.datatype == "datetime") {
                                return (
                                    <Column
                                        key={item.field}
                                        field={item.field}
                                        header={item.header}
                                        body={item.datatype == "date" ? this.dateTemplate : this.dateTimeTemplate}
                                        sortable
                                        filter
                                        filterPlaceholder={item.filterPlaceholder}
                                        filterField={item.field}
                                        sortField={item.field}
                                        style={{width: item.header.length + 1 + "rem"}}
                                        dataType="date"
                                        filterElement={this.dateFilterTemplate}
                                    />
                                );
                            } else if (item.datatype == "number" || item.datatype == "decimal" || item.datatype == "amount") {
                                return(
                                    <Column
                                        key={item.field}
                                        field={item.field}
                                        header={item.header}
                                        sortable
                                        filter
                                        filterPlaceholder={item.filterPlaceholder}
                                        filterField={item.field}
                                        sortField={item.field}
                                        dataType="numeric"
                                        style={{width: item.header.length + 1 + "rem"}}
                                    />
                                );
                            } else {
                                return (
                                    <Column
                                        key={item.field}
                                        field={item.field}
                                        header={item.header}
                                        sortable
                                        filter
                                        filterPlaceholder={item.filterPlaceholder}
                                        filterField={item.field}
                                        sortField={item.field}
                                        dataType="text"
                                        style={{width: item.header.length + 1 + "rem"}}
                                    />
                                );
                            }
                        })

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

【解决方案2】：

我终于得到了这个问题的答案，你必须使用读取数据时创建的 Date 对象的相同实例，库排序器不会识别 Date 对象在构造函数中具有相同日期的新实例。我建议有一个已添加日期的列表（散列）。

【讨论】：