根据当前日期,获得一周中的5天



我希望一周中有5天的时间,具体取决于当前的工作日。

假设今天是星期二。那么我想得到一个从周一到周五的数组。

如果今天是星期三,我想得到一个星期二到星期六的数组。

当前日期将始终是数组中的第二个元素。

我想不通路。

我将分享我的代码:

...
import DayCircle from "../UI/DayCircle";
import { useDate } from "../../hooks/useDate";   
const days = [
{ id: "1", day: "Sun" },
{ id: "2", day: "Mon" },
{ id: "3", day: "Tue" },
{ id: "4", day: "Wed" },
{ id: "5", day: "Thu" },
{ id: "6", day: "Fri" },
{ id: "7", day: "Sat" },
];
export default function DaysContainer({
containerStyle,
circleStyle,
textStyle,
}) {
const { weekday } = useDate();
const renderDays = ({ item, index }) => (
<DayCircle
text={item.day}
textStyle={textStyle}
circleStyle={circleStyle}
isToday={index == weekday}
/>
);
return (
<FlatList
data={days}
renderItem={renderDays}
keyExtractor={(item) => item.id}
contentContainerStyle={{ ...styles.containerStyle, ...containerStyle }}
style={styles.flatList}
horizontal
/>
);
}
const styles = StyleSheet.create({
containerStyle: {
// justifyContent: "space-between",
},
flatList: {
flexGrow: 0,
},
});
DaysContainer.propTypes = {
containerStyle: PropTypes.object,
circleStyle: PropTypes.object,
textStyle: PropTypes.object,
};

以下是自定义挂钩的使用日期:

import { useEffect, useState } from "react";
import format from "date-fns/format";
import english from "date-fns/locale/en-GB";
export const useDate = () => {
const [now, setDate] = useState(new Date()); // Save the current date to be able to trigger an update
useEffect(() => {
// Creates an interval which will update the current data every second
// This will trigger a rerender every component that uses the useDate hook.
const timer = setInterval(() => setDate(new Date()), 1000);
return () => clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount
}, []);
//DATE
const dateFormat = "EEE, dd MMM"; //weekday, day month
const date = format(now, dateFormat, { locale: english });
const today = now.getDate();
const weekday = now.getDay(); //return 0 for Sun,6 for Sat
const month = now.getMonth(); //returns 0 for Jan, 11 for december
const year = now.getFullYear();
//TIME
const hours = now.getHours();
const minutes = now.getMinutes();
return {
date,
today,
month,
year,
weekday,
hours,
minutes,
};
};

您可以将日期放在字典中,然后使用模数获得第1天,然后使用该天作为开始,然后从那里循环。

function getArrayOfDay(idxOf2ndDay, numOfDays=5) {
var days = {
0: "Monday",
1: "Tuesday",
2: "Wednesday",
3: "Thursday",
4: "Friday",
5: "Saturday",
6: "Sunday",
}
//console.log((idxOf2ndDay-1+7) % 7);
var result = [];
for(var i=0; i<numOfDays; i++) {
var curIdx = (idxOf2ndDay-1+7+i) % 7;
result.push(days[curIdx]);
}
return result;
}
console.log("input: monday");
console.log(getArrayOfDay(0));
console.log("input: tuesday");
console.log(getArrayOfDay(1));
console.log("input: wednesday");
console.log(getArrayOfDay(2));
console.log("input: thursday");
console.log(getArrayOfDay(3));
console.log("input: friday");
console.log(getArrayOfDay(4));
console.log("input: saturday");
console.log(getArrayOfDay(5));
console.log("input: sunday");
console.log(getArrayOfDay(6));

输出:

input: monday
]
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday"
]
input: tuesday
[
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
]
input: wednesday
[
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
]
input: thursday
[
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
]
input: friday
[
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Monday"
]
input: saturday
[
"Friday",
"Saturday",
"Sunday",
"Monday",
"Tuesday"
]
input: sunday
[
"Saturday",
"Sunday",
"Monday",
"Tuesday",
"Wednesday"
]

最新更新