大佬教程收集整理的这篇文章主要介绍了JavaScript：将数据库日期划分为过期、今天和明天，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我已经创建了基本的 React 待办事项列表并将其保存到我的数据库中。我在设置时间的地方设置了 duedatetiR_127_11845@e 查询。我想在具有多个数组的一个对象中查询该时间。像这样：@H_673_5@
{
“overdue”: [],“today”: [],“tomorrow”: [],rest of the upcoming dates
}
根据日期我想显示任务编号。我真的不知道从哪里开始。我不想为此使用任何包。如果有人帮助我，我会很高兴。我在 codesandbox 中分享了我的代码。@H_673_5@
这是我的前端代码。 PS: Basically I dID not anything. because i don't kNow where to start@H_673_5@
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.duedatetiR_127_11845@E);
});
// console.log(signledatE);
const datadate = date?.data?.slice(0,1)?.map((i) => {
return i.duedatetiR_127_11845@e;
});
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;
`;
{
"data": [
{
"duedatetiR_127_11845@e": "2021-01-21T13:37:56.587949Z","repeaTinformation": {
"type": "weeks","interval": 2,"day": null,"AnnualStart": null,"AnnualEnd": null
}
},{
"duedatetiR_127_11845@e": "2019-03-15T14:30:22.149836Z","repeaTinformation": {
"type": "months","interval": 1,"day": "any weekday",{
"duedatetiR_127_11845@e": "2021-01-22T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2021-01-23T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2021-01-25T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-04-15T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-04-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-04-26T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2021-01-22T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-05-15T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-05-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-05-24T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2021-02-07T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-06-17T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2021-01-21T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-07-05T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-07-15T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-07-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-07-19T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-08-02T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-08-15T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-08-16T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-08-30T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-09-13T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-09-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-09-16T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-10-15T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-10-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-10-25T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-11-08T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2021-01-22T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-11-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-11-22T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-12-06T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2019-12-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2019-12-16T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2019-12-20T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2020-01-03T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2020-01-15T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2020-01-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2020-01-17T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2020-01-31T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2020-02-14T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2020-02-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2020-02-17T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2020-03-13T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2020-03-14T22:28:14Z",{
"duedatetiR_127_11845@e": "2020-03-15T16:30:11.007867Z",{
"duedatetiR_127_11845@e": "2020-03-16T14:30:22.149836Z",{
"duedatetiR_127_11845@e": "2021-01-27T13:37:56.587949Z",{
"duedatetiR_127_11845@e": "2021-01-23T14:30:22.149836Z","AnnualEnd": null
}
}
]
}
您将需要 3 个过滤器：@H_673_5@
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.duedatetiR_127_11845@E)).getTime() < today),today: dummydata.data.filter(task =>
{
const due = (new Date(task.duedatetiR_127_11845@E)).getTime();
return due >= today && due < today + oneDay;
}),tomorrow: dummydata.data.filter(task =>
{
const due = (new Date(task.duedatetiR_127_11845@E)).getTime();
return due >= today + oneDay && due < today + oneDay * 2;
}),rest: dummydata.data.filter(task => (new Date(task.duedatetiR_127_11845@E)).getTime() >= today + oneDay * 2),};
如果您只在虚拟数据中循环一次（例如使用 forEach），您可以加快过滤速度 - 并根据其 duedatetiR_127_11845@e 将任务推送到相应的组：@H_673_5@
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.duedatetiR_127_11845@E).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);
});
您可以为此使用 date-fns。@H_673_5@
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].duedatetiR_127_11845@E);
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 };
}
以上是大佬教程为你收集整理的JavaScript：将数据库日期划分为过期、今天和明天全部内容，希望文章能够帮你解决JavaScript：将数据库日期划分为过期、今天和明天所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。