Material UI DataGrid 排序日期未按预期工作答案

【问题标题】：Material UI DataGrid Sorting Dates Not Working as ExpectedMaterial UI DataGrid 排序日期未按预期工作
【发布时间】：2022-08-17 01:43:25
【问题描述】：

我正在使用 Material UI DataGrid，我的一列包含日期。 Material UI documentation 说要在列数组中将类型设置为“日期”，我已经这样做了：

{
field: \"submittedAt\",
headerName: \"Submitted\",
minWidth: 150,
flex: 2,
type: \"date\",
headerClassName: \"tableHeader\",
cellClassName: \"hoverPointer\"
}

然后我使用 Luxon 将我的时间戳转换为 MM/dd/yyyy 格式

if (r.data().submittedAt) {
      const d = DateTime.fromMillis(r.data().submittedAt.toMillis());
      requestedDate = d.toFormat(\'MM/dd/yyyy\')
    }

然后使用requestedDate 设置列中单元格的值。当我对数据进行排序时，该列仍按字符串比较器而不是按日期排序：

我不确定我做错了什么，而且我似乎在文档或以前的帖子中找不到太多支持。我知道我可以将日期设置为 yyyy/MM/dd 以便字符串比较器工作，但我不希望出于可读性目的呈现该格式。我还需要用户可以对列进行动态排序，因此服务器端排序也无济于事。提前感谢您的帮助。

标签： javascript sorting material-ui

【解决方案1】：

我做了什么：

在数据/后端响应中，返回 DataGrid 已经理解的 ISO 时间戳（例如“2022-09-12T10:01:08+0200”）
只需更改时间戳向用户显示的方式。

这样，您需要做的调整是最小的（只是渲染代码）

    const dateFormattingOptions: Intl.DateTimeFormatOptions = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    };

    function renderDate(checkTimeAndDate: any) {
        if (!checkTimeAndDate) {
            return '';
        }
        return new Date(checkTimeAndDate).toLocaleDateString(
            'de-DE',
            dateFormattingOptions
        );
    }

    const columns: GridColDef[] = [
        // ...
        {
            field: 'myTimeAndDateField',
            headerName: 'My Time and Date',
            width: 250,
            type: 'dateTime',
            renderCell: (params: GridRenderCellParams<MyDataTypeWithADateField>) =>
                renderDate(params.row.myTimeAndDateField)
        },
        // ...
    ];

    return (<DataGrid
        rows={myData}
        columns={columns}
        // ...
    />);

测试：

test('the data table renders timestamps, formatted for Germany', async () => {
    // ...
    render(<MyComponent />);

    expect(findDataFieldValue('myTimeAndDateField')).toBe('12.09.2022, 10:01:08');
});


function findDataFieldValue(dataField: string): string | null | undefined {
    // material UI makes this into a div - I need to get conceptual table cell instead
    const element: HTMLElement | null = document.querySelector<HTMLElement>(
        "div[role='cell'][data-field='" + dataField + "']"
    );
    return element?.textContent;
}

测试数据：

export const testData: MyDataTypeWithADateField = {
    // ...
    myTimeAndDateField: '2022-09-12T10:01:08+0200',
    // ...
};

【讨论】：