date-fns#getMonth TypeScript Examples

public async findAllInMonthFromProvider({
    provider_id,
    month,
    year,
  }: IFindAllInMonthFromProviderDTO): Promise<Appointment[]> {
    const appointments = this.appointments.filter(appointment => {
      return (
        appointment.provider_id === provider_id &&
        getMonth(appointment.date) + 1 === month &&
        getYear(appointment.date) === year
      );
    });

    return appointments;
  }

public async findAllInDayFromProvider({
    provider_id,
    day,
    month,
    year,
  }: IFindAllInDayFromProviderDTO): Promise<Appointment[]> {
    const appointments = this.appointments.filter(appointment => {
      return (
        appointment.provider_id === provider_id &&
        getDate(appointment.date) === day &&
        getMonth(appointment.date) + 1 === month &&
        getYear(appointment.date) === year
      );
    });

    return appointments;
  }

public async findAllInMonthFromProvider({
    provider_id,
    month,
    year,
  }: IFindAllInMonthFromProviderDTO): Promise<Appointment[]> {
    const appointments = this.appointments.filter(appointment => {
      return (
        appointment.provider_id === provider_id &&
        getMonth(appointment.date) + 1 === month &&
        getYear(appointment.date) === year
      );
    });

    return appointments;
  }

public async findAllInDayFromProvider({
    provider_id,
    day,
    month,
    year,
  }: IFindAllInDayFromProviderDTO): Promise<Appointment[]> {
    const appointments = this.appointments.filter(appointment => {
      return (
        appointment.provider_id === provider_id &&
        getDate(appointment.date) === day &&
        getMonth(appointment.date) + 1 === month &&
        getYear(appointment.date) === year
      );
    });

    return appointments;
  }

public async findAllInMonthFromProvider({
    provider_id,
    month,
    year,
  }: IFindAllInMonthFromProviderDTO): Promise<Appointment[]> {
    const appointments = this.appointments.filter(
      appointment =>
        appointment.provider_id === provider_id &&
        getMonth(appointment.date) + 1 === month &&
        getYear(appointment.date) === year,
    );

    return appointments;
  }

public async findAllInDayFromProvider({
    provider_id,
    day,
    month,
    year,
  }: IFindAllInDayFromProviderDTO): Promise<Appointment[]> {
    const appointments = this.appointments.filter(
      appointment =>
        appointment.provider_id === provider_id &&
        getDate(appointment.date) === day &&
        getMonth(appointment.date) + 1 === month &&
        getYear(appointment.date) === year,
    );

    return appointments;
  }

createDate(year: number, month: number, date: number): Date {
    // Check for invalid month and date (except upper bound on date which we have to check after
    // creating the Date).
    if (month < 0 || month > 11) {
      throw Error(
        `Invalid month index "${month}". Month index has to be between 0 and 11.`
      );
    }

    if (date < 1) {
      throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
    }

    const result = this._createDateWithOverflow(year, month, date);
    // Check that the date wasn't above the upper bound for the month, causing the month to overflow
    if (result.getMonth() !== month) {
      throw Error(`Invalid date "${date}" for month with index "${month}".`);
    }

    return result;
  }

getMonth(date: Date): number {
    return getMonth(date);
  }

today(): Date {
    const d = new Date();
    return this._createDateWithOverflow(
      d.getFullYear(),
      d.getMonth(),
      d.getDate()
    );
  }

DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
  const currentDueDate = task.dueDate.at ? dayjs(task.dueDate.at).toDate() : null;
  const {
    register,
    handleSubmit,
    setValue,
    setError,
    formState: { errors },
    control,
  } = useForm<DueDateFormData>();

  const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
  const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
  const [hasTime, enableTime] = useState(task.hasTime ?? false);

  const years = _.range(2010, getYear(new Date()) + 10, 1);
  const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ];

  const [isRange, setIsRange] = useState(false);
  const [notDuration, setNotDuration] = useState(10);
  const [removedNotifications, setRemovedNotifications] = useState<Array<string>>([]);
  const [notifications, setNotifications] = useState<Array<NotificationInternal>>(
    task.dueDate.notifications
      ? task.dueDate.notifications.map((c, idx) => {
          const duration =
            notificationPeriodOptions.find((o) => o.value === c.duration.toLowerCase()) ?? notificationPeriodOptions[0];
          return {
            internalId: `n${idx}`,
            externalId: c.id,
            period: c.period,
            duration,
          };
        })
      : [],
  );
  return (
    <Wrapper>
      <DateRangeInputs>
        <DatePicker
          selected={startDate}
          onChange={(date) => {
            if (!Array.isArray(date) && date !== null) {
              setStartDate(date);
            }
          }}
          popperClassName="picker-hidden"
          dateFormat="yyyy-MM-dd"
          disabledKeyboardNavigation
          placeholderText="Select due date"
        />
        {isRange ? (
          <DatePicker
            selected={startDate}
            onChange={(date) => {
              if (!Array.isArray(date)) {
                setStartDate(date);
              }
            }}
            popperClassName="picker-hidden"
            dateFormat="yyyy-MM-dd"
            placeholderText="Select from date"
          />
        ) : (
          <AddDateRange>Add date range</AddDateRange>
        )}
      </DateRangeInputs>
      <DatePicker
        selected={startDate}
        onChange={(date) => {
          if (!Array.isArray(date)) {
            setStartDate(date);
          }
        }}
        startDate={startDate}
        useWeekdaysShort
        renderCustomHeader={({
          date,
          changeYear,
          changeMonth,
          decreaseMonth,
          increaseMonth,
          prevMonthButtonDisabled,
          nextMonthButtonDisabled,
        }) => (
          <HeaderActions>
            <HeaderButton onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
              Prev
            </HeaderButton>
            <HeaderSelectLabel>
              {months[date.getMonth()]}
              <HeaderSelect
                value={months[getMonth(date)]}
                onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
              >
                {months.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </HeaderSelect>
            </HeaderSelectLabel>
            <HeaderSelectLabel>
              {date.getFullYear()}
              <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}>
                {years.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </HeaderSelect>
            </HeaderSelectLabel>

            <HeaderButton onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
              Next
            </HeaderButton>
          </HeaderActions>
        )}
        inline
      />
      <ActionsSeparator />
      {hasTime && (
        <ActionsWrapper>
          <ActionClock width={16} height={16} />
          <ActionLabel>Due Time</ActionLabel>
          <DatePicker
            selected={startDate}
            onChange={(date) => {
              if (!Array.isArray(date)) {
                setStartDate(date);
              }
            }}
            showTimeSelect
            showTimeSelectOnly
            timeIntervals={15}
            timeCaption="Time"
            dateFormat="h:mm aa"
          />
          <ActionIcon onClick={() => enableTime(false)}>
            <Cross width={16} height={16} />
          </ActionIcon>
        </ActionsWrapper>
      )}
      {notifications.map((n, idx) => (
        <ActionsWrapper key={n.internalId}>
          <NotificationEntry
            notification={n}
            onChange={(period, duration) => {
              setNotifications((prev) =>
                produce(prev, (draft) => {
                  draft[idx].duration = duration;
                  draft[idx].period = period;
                }),
              );
            }}
            onRemove={() => {
              setNotifications((prev) =>
                produce(prev, (draft) => {
                  draft.splice(idx, 1);
                  if (n.externalId !== null) {
                    setRemovedNotifications((prev) => {
                      if (n.externalId !== null) {
                        return [...prev, n.externalId];
                      }
                      return prev;
                    });
                  }
                }),
              );
            }}
          />
        </ActionsWrapper>
      ))}
      <ControlWrapper>
        <LeftWrapper>
          <SaveButton
            onClick={() => {
              if (startDate && notifications.findIndex((n) => Number.isNaN(n.period)) === -1) {
                onDueDateChange(task, startDate, hasTime, { current: notifications, removed: removedNotifications });
              }
            }}
          >
            Save
          </SaveButton>
          {currentDueDate !== null && (
            <ActionIcon
              onClick={() => {
                onRemoveDueDate(task);
              }}
            >
              <Trash width={16} height={16} />
            </ActionIcon>
          )}
        </LeftWrapper>
        <RightWrapper>
          <ActionIcon
            disabled={notifications.length === 3}
            onClick={() => {
              setNotifications((prev) => [
                ...prev,
                {
                  externalId: null,
                  internalId: `n${prev.length + 1}`,
                  duration: notificationPeriodOptions[0],
                  period: 10,
                },
              ]);
            }}
          >
            <Bell width={16} height={16} />
            <ActionPlus width={8} height={8} />
          </ActionIcon>
          {!hasTime && (
            <ActionIcon
              onClick={() => {
                if (startDate === null) {
                  const today = new Date();
                  today.setHours(12, 30, 0);
                  setStartDate(today);
                }
                enableTime(true);
              }}
            >
              <Clock width={16} height={16} />
            </ActionIcon>
          )}
        </RightWrapper>
      </ControlWrapper>
    </Wrapper>
  );
}