date-fns#addYears TypeScript Examples

add(amount: number, unit?: GanttDateUtil) {
        switch (unit) {
            case 'second':
                return new GanttDate(this.value).addSeconds(amount);
            case 'minute':
                return new GanttDate(this.value).addMinutes(amount);
            case 'hour':
                return new GanttDate(this.value).addHours(amount);
            case 'day':
                return new GanttDate(this.value).addDays(amount);
            case 'week':
                return new GanttDate(this.value).addWeeks(amount);
            case 'month':
                return new GanttDate(this.value).addMonths(amount);
            case 'quarter':
                return new GanttDate(this.value).addQuarters(amount);
            case 'year':
                return new GanttDate(this.value).addYears(amount);
            default:
                return new GanttDate(this.value).addSeconds(amount);
        }
    }

handleKeyDownCell(e: React.KeyboardEvent, date: Date, modifers): void {
    const { locale, dir } = this.props;
    const { currentMonth } = this.state;
    if (e.key !== Keys.ESC) {
      cancelEvent(e);
    }

    const direction = dir === 'ltr' ? 1 : -1;
    const MAX_STEP_TO_CHECK = 7;
    let nextCell;
    switch (e.key) {
    case Keys.TAB:
      if (this.dayPicker) {
        if (e.shiftKey) {
          this.dayPicker
            .querySelector('.tk-daypicker-header--nextYear')
            .focus();
        } else {
          this.dayPicker.querySelector('.tk-daypicker-today').focus();
        }
      }
      break;
    case Keys.SPACE:
    case Keys.SPACEBAR:
    case Keys.ENTER:
      // eslint-disable-next-line no-case-declarations
      const { onDayClick } = this.props;
      onDayClick(date, modifers);
      break;
    case Keys.PAGE_UP:
      if (e.shiftKey) {
        this.monthNavigation(date, addYears(currentMonth, -1));
      } else {
        this.monthNavigation(date, addMonths(currentMonth, -1));
      }
      break;
    case Keys.PAGE_DOWN:
      if (e.shiftKey) {
        this.monthNavigation(date, addYears(currentMonth, 1));
      } else {
        this.monthNavigation(date, addMonths(currentMonth, 1));
      }
      break;
    case Keys.HOME:
      // eslint-disable-next-line no-case-declarations
      const firstDayOfWeek = startOfWeek(date, { locale });
      nextCell =
          firstDayOfWeek.getDate() <= date.getDate()
            ? firstDayOfWeek
            : startOfMonth(date);
      this.focusOnlyEnabledCell(nextCell, 'next', MAX_STEP_TO_CHECK);
      break;
    case Keys.END:
      // eslint-disable-next-line no-case-declarations
      const lastDayOfWeek = endOfWeek(date, { locale });
      nextCell =
          date.getDate() <= lastDayOfWeek.getDate()
            ? lastDayOfWeek
            : lastDayOfMonth(date);
      this.focusOnlyEnabledCell(nextCell, 'previous', MAX_STEP_TO_CHECK);
      break;
    case Keys.ARROW_LEFT:
      this.arrowNavigation(date, addDays(date, -1 * direction));
      break;
    case Keys.ARROW_UP:
      this.arrowNavigation(date, addDays(date, -7));
      break;
    case Keys.ARROW_RIGHT:
      this.arrowNavigation(date, addDays(date, 1 * direction));
      break;
    case Keys.ARROW_DOWN:
      this.arrowNavigation(date, addDays(date, 7));
      break;
    default:
      break;
    }
  }

parseDate = (dt?: string, rounded?: "start" | "end"): ParsedDate => {
  if (dt && isDate(dt)) {
    return parseISO(dt);
  } else if (dt && isDateLike(dt)) {
    const parts = getDateParts(dt);

    if (parts) {
      const { part, op, diff } = parts;
      const diffNum = parseInt(`${op}${diff}`, 10);
      let date = startOfMinute(new Date());

      switch (part) {
        case DateParts.NOW:
          return date;
        case DateParts.DECADE:
          if (rounded) {
            date = (rounded === "start" ? startOfDecade : endOfDecade)(date);
          }
          return addYears(date, diffNum * 10);
        case DateParts.YEAR:
          if (rounded) {
            date = (rounded === "start" ? startOfYear : endOfYear)(date);
          }
          return addYears(date, diffNum);
        case DateParts.QUARTER:
          if (rounded) {
            date = (rounded === "start" ? startOfQuarter : endOfQuarter)(date);
          }
          return addQuarters(date, diffNum);
        case DateParts.MONTH:
          if (rounded) {
            date = (rounded === "start" ? startOfMonth : endOfMonth)(date);
          }
          return addMonths(date, diffNum);
        case DateParts.WEEK:
          if (rounded) {
            date = (rounded === "start" ? startOfWeek : endOfWeek)(date);
          }
          return addWeeks(date, diffNum);
        case DateParts.DAY:
          if (rounded) {
            date = (rounded === "start" ? startOfDay : endOfDay)(date);
          }
          return addDays(date, diffNum);
        case DateParts.HOUR:
          if (rounded) {
            date = (rounded === "start" ? startOfHour : endOfHour)(date);
          }
          return addHours(date, diffNum);
        case DateParts.MINUTE:
          if (rounded) {
            date = (rounded === "start" ? startOfMinute : endOfMinute)(date);
          }
          return addMinutes(date, diffNum);
      }
    }
  }
  return undefined;
}

addCalendarYears(date: Date, years: number): Date {
    return addYears(date, years);
  }

addYears(amount: number): GanttDate {
        return new GanttDate(addYears(this.value, amount));
    }

Header: FunctionComponent<HeaderProps> = ({ date, dir, labels, months, onChange, parentRef }) => {
  const changeYear = (amount: number) => {
    onChange(addYears(date, amount));
  };

  const changeMonth = (amount: number) => {
    onChange(addMonths(date, amount));
  };

  /**
   * Change the behaviour of 'Tab' and 'Shift + Tab' event of an html element
   * Used to allow loop navigation "'Today Button' --> Header (<<) --> Header (<)"
   */
  const ajustLoopNavigation = (event) => {
    if (!parentRef) {
      return;
    }
    if (event.key === Keys.TAB) {
      cancelEvent(event);
      if (event.shiftKey) {
        const elClassPrevious = parentRef.querySelector('.tk-daypicker-today');
        if (elClassPrevious) {
          elClassPrevious.focus();
        }
      } else {
        const elClassNext = parentRef.querySelector(
          '.tk-daypicker-header--prevMonth'
        );
        if (elClassNext) {
          elClassNext.focus();
        }
      }
    }
  };

  const textHeader = `${months[date.getMonth()]} ${date.getFullYear()}`;
  return (
    <div
      className="tk-daypicker-header"
      role="heading"
      style={{ direction: dir }}
    >
      <div>
        <button
          aria-label={labels.previousYear}
          className="tk-daypicker-header--prevYear"
          onClick={() => changeYear(-1)}
          onKeyDown={ajustLoopNavigation}
        >
          <Icon
            iconName={dir === 'rtl' ? 'chevron-right' : 'chevron-left'}
          ></Icon>
        </button>
        <button
          aria-label={labels.previousMonth}
          className="tk-daypicker-header--prevMonth"
          onClick={() => changeMonth(-1)}
        >
          <Icon iconName={dir === 'rtl' ? 'right' : 'left'}></Icon>
        </button>
      </div>
      <div className="tk-daypicker-header--text">{textHeader}</div>
      <div>
        <button
          aria-label={labels.nextMonth}
          className="tk-daypicker-header--nextMonth"
          onClick={() => changeMonth(1)}
        >
          <Icon iconName={dir === 'rtl' ? 'left' : 'right'}></Icon>
        </button>
        <button
          aria-label={labels.nextYear}
          className="tk-daypicker-header--nextYear"
          onClick={() => changeYear(1)}
        >
          <Icon
            iconName={dir === 'rtl' ? 'chevron-left' : 'chevron-right'}
          ></Icon>
        </button>
      </div>
    </div>
  );
}