javascript 如何增加每个Map循环的天数(Moment.js)?

r7xajy2e  于 2023-01-01  发布在  Java
关注(0)|答案(3)|浏览(133)

我在React中制作了一个简单的周日历,需要在其中显示小时列。一个日历将在单击时生成,并基于实际的周数显示整个星期的周一到周日。我使用Moment.js来管理日期。
我尝试做的是在每个map循环中将日期编号增加1。现在我知道如何显示实际日期的正确日期编号。但是我如何在每个循环中将其增加1呢?我尝试了这个解决方案How increment id tag with map function in React。它可以在id上工作,但在这个示例中不起作用。
我使用以下代码显示日期:

{moment(date).format(`DD/MM/YYYY`)}

我很乐意得到任何提示或建议。下面是我的代码的一小部分:

const CalendarAdmin = ({openModal}) => {

    const { active, setActive, sorted } = useContext(CalendarContext)

    function addCalendar() {
        setShow(true);
    }

    const [show, setShow] = useState(false);

    const date = new Date();    
    const currentDate = moment(date).format('DD/MM/YYYY');
    const currentWeek = moment(date).format('w');
    const currentDay = moment(date).format('D');

    const renderWeek = () => {
        return (
        <div className="calendar-content">
                <h1>Calendar 1</h1>
                <h1>Okres czasu: 14.11 - 20.11 ({currentWeek})</h1>
                <div className="calendar-days"> 
                    
                    {dayNames.map((item, dayIndex) => 
                        <div className="day-column" >
                            <h2 key={dayIndex}>{item.longName}</h2>
                            <h2>{item.testDate}</h2>
                              
                            {moment(date).format(`DD/MM/YYYY`)}
                                                       
                            {hours.map((hour, hourIndex) => {...
olhwl3o2

olhwl3o21#

可以通过以下几种方式使用贴图索引:

  • 在当前日期上加上24小时(毫秒)(* 1000 * 60 * 60 * 24 *
{dayNames.map((item, dayIndex) => 
  <div key={dayIndex} className="day-column" >
    <h2>{item.longName}</h2>
    <h2>{item.testDate}</h2>

    {moment(date.getTime() + i * 1000 * 60 * 60 * 24).format(`DD/MM/YYYY`)}

    ...
  • 使用add方法向当前日期添加时间单位(* 以天为单位 *
{dayNames.map((item, dayIndex) => 
  <div key={dayIndex} className="day-column" >
    <h2>{item.longName}</h2>
    <h2>{item.testDate}</h2>

    {moment(date).add(i, "day").format(`DD/MM/YYYY`)}

    ...

演示:

33qvvth1

33qvvth12#

您可以将此add function in moment js用作

arrayToMap.map((val,i) => {
  const date = new Date(); 
  return moment(date).add(i, 'd');
})
bvjxkvbb

bvjxkvbb3#

既然你想增加每一次迭代的天数,你可以这样做。

const currentDate = new Date()

    {
       dayNames.map((item, dayCount) => {
             const newDate = moment(currentDate, "DD-MM-YYYY").add(dayCount,'days');
              return <div>{newDate}</div>
    }

相关问题