如何在div中按日期对数据进行排序(JavaScript/Rect)

Question

我有点困在这里，我从Firebase获取数据，但尽管我尝试了很多，但我还是无法按日期对显示的会议进行排序=>时间

有人能帮我如何显示这个按日期排序的第一个和按时间排序的相同日期吗？

谢谢！

<div>
{/* {consultation && consultation.map(item => item.advisor)} */}
{rows && rows.map(row =>
<div key={row.id}>
<div>{row.date}</div>
<div>{row.time}</div>
<div>{row.status}</div>
<br/>
</div>
)}
</div>

Answer 1

假设ur，
日期格式类似于dd. mm. yyyy，其中dd和mm不加零，以1开头。
时间格式HH:MM - 11:30，u只需要开始时间而不需要结束(HH:MM- 11:30(。

在传递到渲染之前尝试这样的操作，

rows.sort((a, b) => datetimeToTS(b.date, b.time) - datetimeToTS(a.date, a.time))
function datetimeToTS(dateStr, timeStr) {
const dateMatch = dateStr.match(/(?<dd>d+).s*(?<mm>d+).s*(?<yy>d+)/)
const timeMatch = timeStr.match(/^(?<hh>d+):(?<mm>d+)/)

if (dateMatch == null || timeMatch == null)
throw new Error('Could match date/time format');

const date = new Date(
dateMatch.groups.yy,
dateMatch.groups.mm-1,
dateMatch.groups.dd,
timeMatch.groups.hh,
timeMatch.groups.mm
);
return date.getTime()
}

此函数使用js并将其转换为date&时间戳。你可以使用类似的momentjs来代替

所以，他们都会，

const sortedRows = rows.sort((a, b) => datetimeToTS(b.date, b.time) - datetimeToTS(a.date, a.time))
return <div>
{/* {consultation && consultation.map(item => item.advisor)} */}
{sortedRows && sortedRows.map(row =>
<div key={row.id}>
<div>{row.date}</div>
<div>{row.time}</div>
<div>{row.status}</div>
<br/>
</div>
)}
</div>

您可能想要使用useMemo，因为在每次渲染时进行排序可能不太昂贵。

交互示例，

// Some randomly generated data
const row = [{
"date": "1. 9. 2020",
"time": "4:00 - 4:30"
}, {
"date": "1. 9. 2020",
"time": "12:00 - 12:30"
}, {
"date": "1. 9. 2020",
"time": "2:00 - 2:30"
}, {
"date": "3. 9. 2020",
"time": "3:00 - 3:30"
}, {
"date": "4. 9. 2020",
"time": "7:00 - 7:30"
}, {
"date": "3. 9. 2020",
"time": "2:00 - 2:30"
}, {
"date": "4. 9. 2020",
"time": "12:00 - 12:30"
}, {
"date": "1. 9. 2020",
"time": "8:00 - 8:30"
}, {
"date": "2. 9. 2020",
"time": "11:00 - 11:30"
}, {
"date": "4. 9. 2020",
"time": "6:00 - 6:30"
}, {
"date": "11. 9. 2020",
"time": "9:00 - 9:30"
}, {
"date": "12. 9. 2020",
"time": "9:00 - 9:30"
}, {
"date": "13. 9. 2020",
"time": "6:00 - 6:30"
}, {
"date": "14. 9. 2020",
"time": "4:00 - 4:30"
}, {
"date": "15. 9. 2020",
"time": "5:00 - 5:30"
}, {
"date": "16. 9. 2020",
"time": "12:00 - 12:30"
}, {
"date": "17. 9. 2020",
"time": "12:00 - 12:30"
}, {
"date": "18. 9. 2020",
"time": "5:00 - 5:30"
}, {
"date": "19. 9. 2020",
"time": "8:00 - 8:30"
}, {
"date": "20. 9. 2020",
"time": "7:00 - 7:30"
}, {
"date": "21. 9. 2020",
"time": "4:00 - 4:30"
}, {
"date": "22. 9. 2020",
"time": "10:00 - 10:30"
}, {
"date": "23. 9. 2020",
"time": "6:00 - 6:30"
}, {
"date": "24. 9. 2020",
"time": "2:00 - 2:30"
}, {
"date": "25. 9. 2020",
"time": "4:00 - 4:30"
}];

// Sort row by first date, then time (meeting start time)
console.log(
'nnsmallest First,',
row.sort((a, b) => datetimeToTS(a.date, a.time) - datetimeToTS(b.date, b.time)),
'nnlargest First,',
row.sort((a, b) => datetimeToTS(b.date, b.time) - datetimeToTS(a.date, a.time))
)

// this simply parses date & time (meeting start time) and returns a single timeStamp
function datetimeToTS(dateStr, timeStr) {
const dateMatch = dateStr.match(/(?<dd>d+).s*(?<mm>d+).s*(?<yy>d+)/)
const timeMatch = timeStr.match(/^(?<hh>d+):(?<mm>d+)/)

if (dateMatch == null || timeMatch == null)
throw new Error('Could match date/time format');

const date = new Date(
dateMatch.groups.yy,
dateMatch.groups.mm-1,
dateMatch.groups.dd,
timeMatch.groups.hh,
timeMatch.groups.mm
);
return date.getTime()
}

Answer 2

简单的方法：

rows.sort((a, b) => Date.parse(a.time) < Date.parse(b.time) ? -1 : 1)

Answer 3

映射之前必须对数组进行排序：

<div>
{rows && rows.sort(function(a,b){
return new Date(b.date) - new Date(a.date);
}).map(row =>
<div key={row.id}>
<div>{row.date}</div>
<div>{row.time}</div>
<div>{row.status}</div>
<br/>
</div>
)}
</div>