JavaScript：将数据库日期划分为过期、今天和明天

【问题标题】：JavaScript: Divide database date into Overdue, Today and tomorrowJavaScript：将数据库日期划分为过期、今天和明天
【发布时间】：2021-01-21 07:13:37
【问题描述】：

我已经创建了基本的 React 待办事项列表并将其保存到我的数据库中。我设置了dueDatetime 查询它设置时间的位置。我想在具有多个数组的一个对象中查询该时间。像这样：

  {
      “overdue”: [],
       “today”: [],
       “tomorrow”: [],
       rest of the upcoming dates
    }

我想根据日期显示任务编号。我真的不知道从哪里开始。我不想为此使用任何软件包。如果有人帮助我，我会非常高兴。我在codesandbox 分享我的代码。

这是我的前端代码。 PS: Basically I did not anything. because i don't know where to start

import React from "react";
import "./styles.css";
import date from "./Date.json";
import styled from "styled-components";

export default function App() {
  const signledate = date?.data?.map((i) => {
    return new Date(i.dueDatetime);
  });
  // console.log(signledate);

  const datadate = date?.data?.slice(0, 1)?.map((i) => {
    return i.dueDatetime;
  });
  console.log(signledate);
  console.log(new Date());
  return (
    <Container>
      <Card>
        <Text>You have 10 overdue</Text>
      </Card>
      <Card>
        <Text>Today you have 6 tasks</Text>
      </Card>
      <Card>
        <Text>Tomorrow you have 20 tasks</Text>
      </Card>
      <Card>
        <Text>Jan 23 5 task </Text>
      </Card>
      <Card>
        <Text>Jan 24 2 task </Text>
      </Card>
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: row;
`;

const Card = styled.div`
  background-color: lightblue;
  height: 100px;
  width: 300px;
  border-radius: 20px;
  margin: 10px;
`;

const Text = styled.text`
  font-size: 12px;
  padding: 20px;
`;

这是我在 json 中的 dymmydata

{
  "data": [
    {
      "dueDatetime": "2021-01-21T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-03-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-22T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-23T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-25T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-04-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-04-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-04-26T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-22T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-05-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-05-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-05-24T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-02-07T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-22T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-06-17T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-21T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-07-05T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-07-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-07-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-07-19T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-08-02T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-08-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-22T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-08-16T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-08-30T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-09-13T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-09-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-09-16T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-23T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-21T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-10-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-10-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-10-25T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-11-08T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-22T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-11-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-11-22T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-12-06T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-12-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-12-16T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2019-12-20T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-01-03T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-01-15T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-01-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-01-17T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-01-31T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-02-14T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-02-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-02-17T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-22T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-03-13T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-03-14T22:28:14Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-03-15T16:30:11.007867Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2020-03-16T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-27T13:37:56.587949Z",
      "repeatInformation": {
        "type": "weeks",
        "interval": 2,
        "day": null,
        "annualStart": null,
        "annualEnd": null
      }
    },
    {
      "dueDatetime": "2021-01-23T14:30:22.149836Z",
      "repeatInformation": {
        "type": "months",
        "interval": 1,
        "day": "any weekday",
        "annualStart": null,
        "annualEnd": null
      }
    }
  ]
}

【问题讨论】：

    标签： javascript sorting date


    【解决方案1】：

    您将需要 3 个过滤器：

    const oneDay = 24 * 3600 * 1000; // we do not take into account Daylight-savings
let today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
today = today.getTime();

const tasks = {
  overdue: dummydata.data.filter(task => (new Date(task.dueDatetime)).getTime() < today),
  today: dummydata.data.filter(task => 
  { 
    const due = (new Date(task.dueDatetime)).getTime();
    return due >= today && due < today + oneDay;
  }),
  tomorrow: dummydata.data.filter(task => 
  {
    const due = (new Date(task.dueDatetime)).getTime();
    return due >= today + oneDay && due < today + oneDay * 2;
  }),
  rest: dummydata.data.filter(task => (new Date(task.dueDatetime)).getTime() >= today + oneDay * 2),
};

    如果您只在 dummydata 中循环一次（例如使用 forEach），则可以加快过滤速度 - 并根据其 dueDatetime 将任务推送到相应的组：

      const today = new Date().toISOString().substr(0,10);    
  let tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  tomorrow = tomorrow.toISOString().substr(0,10);
  const overdueTasks = [], todayTasks = [], tomorrowTasks = [], restTasks = [];

  date.data.forEach(task =>
    {
      const stamp = new Date(task.dueDatetime).toISOString().substr(0,10);
      if(stamp < today) overdueTasks.push(task);
      else if(stamp === today) todayTasks.push(task);
      else if(stamp === tomorrow) tomorrowTasks.push(task);
      else restTasks.push(task);
    });

    【讨论】：

    • 当我打印出来它不显示今天的任务。 codesandbox.io/s/date-nf765?file=/src/App.js
    • 这使用“现在”作为当前日期，因此当它们可能应该是“今天”时，同一天但更早时间的时间戳将被归类为“过期”。当 24 小时有 8.64e7 毫秒时，它通过仅添加 8.64e4 毫秒来增加一天。在遵守夏令时的情况下，使用毫秒添加一天并不是一个好主意。
    • 我修复了这个错误 - 请再次检查。
    • @IVOGELOV 你提到了const oneDay = 24 * 3600 * 1000; // we do not take into account Daylight-savings.，但我住在欧洲。我们遵循夏令时。有什么办法可以用你的代码进行夏令时。我使用了一个名为[Day.js](https://day.js.org/en/) 的包。但是不知道怎么用逻辑。
    • 我也住在欧洲。第二个示例（forEach 循环）不使用 oneDay 常量 - 它是否给您错误的结果？
    【解决方案2】：

    您可以为此使用date-fns。

    例子：

        import { isValid } from 'date-fns/isValid';
    import { isPast } from 'date-fns/isPast';
    import { isTomorrow } from 'date-fns/isTomorrow';
    import { isToday } from 'date-fns/isToday';
    
    const groupByDates = (data) => {
        const overdue = [];
        const today = [];
        const tomorrow = [];
        const rest = [];
        for (let i = 0; i < data.length; i++) {
            const date = new Date(Data[i].dueDatetime);
            if (isValid(date)) {
                if (isToday(date)) {
                    today.push(date);
                    continue;
                }
                if (isTomorrow(date)) {
                    tomorrow.push(date);
                    continue;
                }
                if (isPast(date)) {
                    overdue.push(date);
                    continue;
                }
                rest.push(date);
            }
        }
        return { overdue, today, tomorrow, rest };
    }

    【讨论】：

    猜你喜欢
    • 2019-10-30
    • 1970-01-01
    • 2017-09-18
    • 1970-01-01
    • 1970-01-01
    • 2012-07-05
    • 1970-01-01
    • 1970-01-01
    • 2015-08-04
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode