date-fns#differenceInCalendarMonths TypeScript Examples

The following examples show how to use date-fns#differenceInCalendarMonths. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DayPicker.tsx    From symphony-ui-toolkit with Apache License 2.0 6 votes vote down vote up 
arrowNavigation(date: Date, nextDate: Date) {
    const delta = differenceInCalendarMonths(nextDate, date);
    const action = isBefore(date, nextDate) ? 'next' : 'previous';
    if (delta !== 0) {
      this.setState({ currentMonth: nextDate }, () =>
        this.focusOnlyEnabledCell(nextDate, action, null, false)
      );
    } else {
      this.focusOnlyEnabledCell(nextDate, action, null);
    }
  }
Example #2
Source File: DayPicker.tsx    From symphony-ui-toolkit with Apache License 2.0 4 votes vote down vote up 
renderBody() {
    const {
      dir,
      locale,
      selectedDays,
      disabledDays,
      highlightedDays,
      onDayClick,
    } = this.props;
    const { today, currentMonth } = this.state;
    const daysInMonth = getDaysInMonth(currentMonth);
    const daysNeededForLastMonth = getDaysNeededForLastMonth(
      currentMonth,
      locale
    );
    const daysNeededForNextMonth = getDaysNeededForNextMonth(
      currentMonth,
      locale
    );

    const selectedDateString = selectedDays
      ? lightFormat(selectedDays, 'yyyy-MM-dd')
      : null;
    const todayDateString = lightFormat(today, 'yyyy-MM-dd');

    const isSelectedDayVisible =
      selectedDays &&
      differenceInCalendarMonths(selectedDays, currentMonth) === 0;
    return (
      <div className="tk-daypicker-body" role="grid" style={{ direction: dir }}>
        {this.renderOutsideDay(daysNeededForLastMonth)}

        {toArray(daysInMonth).map((cell) => {
          const cellNumber = cell + 1;
          const cellDate = setDate(currentMonth, cellNumber);
          const cellName = formatDay(cellDate, locale);

          const itemDateString = lightFormat(cellDate, 'yyyy-MM-dd');
          const isSelected = itemDateString === selectedDateString;
          const isToday = itemDateString === todayDateString;
          const isDisabled = matchDay(cellDate, disabledDays);
          const isHighlighted = matchDay(cellDate, highlightedDays);
          const ariaSelected = isDisabled ? undefined : isSelected;
          const isTabIndex = isSelectedDayVisible
            ? isSelected
              ? 0
              : -1
            : cell === 0
              ? 0
              : -1; // focus on selected day otherwise first cell

          return (
            <div
              key={cellName}
              aria-label={cellName}
              aria-selected={ariaSelected}
              tabIndex={isTabIndex}
              role="gridcell"
              className={classNames(
                'tk-daypicker-day',
                {
                  'tk-daypicker-day--selected': isSelected,
                },
                {
                  'tk-daypicker-day--today': isToday,
                },
                {
                  'tk-daypicker-day--highlighted': isHighlighted && !isDisabled,
                },
                { 'tk-daypicker-day--disabled': isDisabled }
              )}
              onKeyDown={(e) =>
                this.handleKeyDownCell(e, cellDate, {
                  disabled: isDisabled,
                  selected: isSelected,
                })
              }
              onClick={() =>
                onDayClick(cellDate, {
                  disabled: isDisabled,
                  selected: isSelected,
                })
              }
            >
              {cellNumber}
            </div>
          );
        })}
        {this.renderOutsideDay(daysNeededForNextMonth)}
      </div>
    );
  }