各时间段的交错-CSDN博客

本文链接：https://blog.csdn.net/qq_42549017/article/details/136815940

本文介绍了如何在React中使用DatePicker组件管理项目的启动、需求、设计、研发等不同阶段的日期范围，并确保时间区间无重叠。通过`handleDateChange`函数检测和处理时间冲突情况。

摘要由CSDN通过智能技术生成

需求就是一个项目的进行有启动阶段，需求阶段，设计阶段，研发阶段，实施阶段，上线阶段，试运行阶段，质保阶段，这些阶段的时间是不能有重合的,这里以react为例

实现如下：
html部分

<ul style={{ fontSize: '16px' }} className='fixed_card'>

                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>启动阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      value={
                        startNodeStart && startNodeEnd
                          ? [moment(startNodeStart, 'YYYY-MM-DD'), moment(startNodeEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'startNode', '启动阶段')
                      }
                      placeholder={['开始时间', '结束时间']}
                      format="YYYY-MM-DD"
                      disabled={!startStatus}
                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>需求阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        demandNodeStart && demandNodeEnd
                          ? [moment(demandNodeStart, 'YYYY-MM-DD'), moment(demandNodeEnd, 'YYYY-MM-DD')]
                          : null
                      }

                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'demandNode', '需求阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!demandStatus}

                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>设计阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        designNodeStart && designNodeEnd
                          ? [moment(designNodeStart, 'YYYY-MM-DD'), moment(designNodeEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'designNode', '设计阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!designStatus}

                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>研发阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        developmentNodeStart && developmentNodeEnd
                          ? [moment(developmentNodeStart, 'YYYY-MM-DD'), moment(developmentNodeEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'developmentNode', '研发阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!developmentStatus}

                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>实施阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        implementationNodeStart && implementationNodeEnd
                          ? [moment(implementationNodeStart, 'YYYY-MM-DD'), moment(implementationNodeEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'implementationNode', '实施阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!implementationStatus}

                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>上线阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        launchNodeStart && launchNodeEnd
                          ? [moment(launchNodeStart, 'YYYY-MM-DD'), moment(launchNodeEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'launchNode', '上线阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!launchStatus}

                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>试运行阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        trialOperationStart && trialOperationEnd
                          ? [moment(trialOperationStart, 'YYYY-MM-DD'), moment(trialOperationEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'trialOperation', '试运行阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!trialOperationStatus}

                    />
                  </li>
                  <li style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ width: '8%', display: 'block' }}>质保阶段:</span>
                    <DatePicker.RangePicker
                      style={{ width: '20%', marginBottom: '10px' }}
                      placeholder={['开始时间', '结束时间']}
                      value={
                        warrantyOperationStart && warrantyOperationEnd
                          ? [moment(warrantyOperationStart, 'YYYY-MM-DD'), moment(warrantyOperationEnd, 'YYYY-MM-DD')]
                          : null
                      }
                      onChange={(dates, dateStrings) =>
                        this.handleDateChange(dates, dateStrings, 'warrantyOperation', '质保阶段')
                      }
                      format="YYYY-MM-DD"
                      disabled={!trialOperationStatus}

                    />
                  </li>
                </ul>

js代码

handleDateChange = (dates, dateStrings, stateKey, skname) => {
    const { startNodeStart, startNodeEnd, demandNodeStart, demandNodeEnd, designNodeStart, designNodeEnd, developmentNodeStart, developmentNodeEnd, implementationNodeStart, implementationNodeEnd, launchNodeStart, launchNodeEnd, trialOperationStart, trialOperationEnd, warrantyOperationStart, warrantyOperationEnd } = this.state;
    if(
      (stateKey === 'startNode' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'demandNode' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'designNode' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'developmentNode' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'implementationNode' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'launchNode' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'trialOperation' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], warrantyOperationStart, warrantyOperationEnd))) ||
      (stateKey === 'warrantyOperation' && (this.isDateRangeOverlap(dateStrings[0], dateStrings[1], startNodeStart, startNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], demandNodeStart, demandNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], designNodeStart, designNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], developmentNodeStart, developmentNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], implementationNodeStart, implementationNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], launchNodeStart, launchNodeEnd) || this.isDateRangeOverlap(dateStrings[0], dateStrings[1], trialOperationStart, trialOperationEnd)))
    ) {
      // 时间交叉，给出提示或者处理逻辑
      message.error(`时间与${skname}阶段存在交叉`);
    } else {
      // 时间不交叉，更新state并处理其他逻辑
      this.setState({
        [stateKey + 'Start']: dateStrings[0],
        [stateKey + 'End']: dateStrings[1],
      }, () => {
        this.handleButtonClick('实施情况');
      });
    }
  };