根据当天获取一周中的 5 天

Question

我想根据当前工作日获得一周中的 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,
};

以下是自定义钩子useDate：

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,
  };
};

Answer 1

您可以将日期放入字典中，然后使用模数获取第 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"
]