如何按 div 中的日期对数据进行排序/排序（JavaScript/React）

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

假设你，
日期格式类似于dd. mm. yyyy，其中dd 和mm 不填充零并且以1 开头。
时间格式HH:MM - 11:30，你只需要开始时间而不是结束时间（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，将日期和时间转换为时间戳。您可以使用 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(
  '\n\nsmallest First,',
  row.sort((a, b) => datetimeToTS(a.date, a.time) - datetimeToTS(b.date, b.time)),

  '\n\nlargest 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>