date-fns#isAfter JavaScript Examples

isSelectable = (date, { minimumDate, maximumDate }) =>
  !isBefore(date, startOfDay(minimumDate)) && !isAfter(date, maximumDate)

getFormattedBlockedIntervals = (blockedDates = [], [startTime, endTime]) => {
  if (!blockedDates.length) return null

  const timelineLength = differenceInMilliseconds(endTime, startTime)
  const getConfig = getTimelineConfig(startTime, timelineLength)

  const formattedBlockedDates = blockedDates.map((interval, index) => {
    let { start, end } = interval

    if (isBefore(start, startTime)) start = startTime
    if (isAfter(end, endTime)) end = endTime

    const source = getConfig(start)
    const target = getConfig(end)

    return { id: `blocked-track-${index}`, source, target }
  })

  return formattedBlockedDates
}

MonthSelector = ({ date, minDate, maxDate, locale, onSelect }) => {
  const start = startOfYear(date);
  const months = [];
  for (let i = 0; i < 12; i++) {
    months.push(addMonths(start, i));
  }

  function handleSelect(value) {
    onSelect(setMonth(date, value));
  }

  return (
    <table>
      <tbody>
        {chunk(months, 3).map((row, i) => (
          <tr key={i}>
            {row.map((month, j) => {
              const disabled =
                isBefore(endOfMonth(month), minDate) || isAfter(startOfMonth(month), maxDate);
              return (
                <td
                  key={j}
                  className={classNames(locale, {
                    [styles.selected]: month.getMonth() === date.getMonth(),
                    [styles.disabled]: disabled,
                  })}
                  onClick={!disabled ? () => handleSelect(month.getMonth()) : null}
                >
                  {dateFormat(month, 'MMMM', locale)}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

async update(req, res) {
    const { id: deliveryman_id, deliveryId } = req.params;

    const deliveryman = await Deliveryman.findOne({
      where: { id: deliveryman_id }
    });

    if (!deliveryman) {
      return res.status(400).json({ error: 'Deliveryman does not exists' });
    }

    const initialDate = new Date();
    const initialHour = setSeconds(setMinutes(setHours(initialDate, 8), 0), 0);
    const finalHour = setSeconds(setMinutes(setHours(initialDate, 18), 0), 0);

    if (isAfter(initialDate, finalHour) || isBefore(initialDate, initialHour)) {
      return res
        .status(400)
        .json({ error: 'Orders pickup only between 08:00AM and 18:00PM' });
    }

    const { count: numbersOfDeliveries } = await Delivery.findAndCountAll({
      where: {
        deliveryman_id,
        start_date: {
          [Op.between]: [startOfDay(initialDate), endOfDay(initialDate)]
        }
      }
    });

    if (numbersOfDeliveries >= 5) {
      return res.status(400).json({ error: 'Maximum deliveries reached' });
    }

    const UpdatedDelivery = await Delivery.findOne({
      where: {
        id: deliveryId,
        deliveryman_id
      }
    });

    if (!UpdatedDelivery)
      res.status(400).json({ error: 'Delivery does not exists' });

    await UpdatedDelivery.update({
      start_date: initialDate
    });

    return res.status(200).json(UpdatedDelivery);
  }

reducer = (state, action) => {
  switch (action.type) {
    case 'setStartDate':
      return { ...state, startDate: action.value }
    case 'setEndDate':
      return { ...state, endDate: action.value }
    case 'setRange':
      return { ...state, startDate: action.startDate, endDate: action.endDate }
    case 'setCellHeight':
      return { ...state, cellHeight: action.value }
    case 'setIsWide':
      return { ...state, isWide: action.value }
    case 'reset':
      return {
        ...createInitialState(action.currentMonth, state.locale),
        cellHeight: state.cellHeight,
        isWide: state.isWide
      }
    case 'transitionToCurrentMonth': {
      const { currentMonth } = action
      const { lastCurrentMonth, startDate, endDate, cellHeight } = state

      const newState = {
        ...state,
        lastCurrentMonth: currentMonth,
        transition: true
      }

      if (isAfter(currentMonth, lastCurrentMonth)) {
        const offset = -(rowsBetweenDates(startDate, currentMonth, state.locale) - 1) * cellHeight

        return {
          ...newState,
          endDate: getEndDate(currentMonth, state.locale),
          offset,
          origin: ORIGIN_TOP
        }
      } else if (isBefore(currentMonth, lastCurrentMonth)) {
        const gridHeight = cellHeight * 6
        const offset = rowsBetweenDates(currentMonth, endDate, state.locale) * cellHeight - gridHeight

        return {
          ...newState,
          startDate: getStartDate(currentMonth, state.locale),
          offset,
          origin: ORIGIN_BOTTOM
        }
      }

      return state
    }
    default:
      throw new Error(`Unknown ${action.type} action type`)
  }
}

DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
  const dateLocale = getDateLocale(locale);
  const weekStartsOn = dateLocale?.options?.weekStartsOn || 0;
  const startWeek = startOfWeek(date, {
    locale: dateLocale,
    weekStartsOn,
  });
  const startMonth = startOfMonth(date);
  const startDay = subDays(startMonth, startMonth.getDay() - weekStartsOn);
  const month = date.getMonth();
  const year = date.getFullYear();

  const daysOfWeek = [];
  for (let i = 0; i < 7; i++) {
    daysOfWeek.push(addDays(startWeek, i));
  }

  const days = [];
  for (let i = 0; i < 35; i++) {
    days.push(addDays(startDay, i));
  }

  return (
    <table>
      <thead>
        <tr>
          {daysOfWeek.map((day, i) => (
            <th key={i} className={locale}>
              {dateFormat(day, 'EEE', locale)}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {chunk(days, 7).map((week, i) => (
          <tr key={i}>
            {week.map((day, j) => {
              const disabled = isBefore(day, minDate) || isAfter(day, maxDate);
              return (
                <td
                  key={j}
                  className={classNames({
                    [styles.selected]: isSameDay(date, day),
                    [styles.faded]: day.getMonth() !== month || day.getFullYear() !== year,
                    [styles.disabled]: disabled,
                  })}
                  onClick={!disabled ? () => onSelect(day) : null}
                >
                  {day.getDate()}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default function DatePickerForm({
  startDate: defaultStartDate,
  endDate: defaultEndDate,
  minDate,
  maxDate,
  onChange,
  onClose,
}) {
  const [selected, setSelected] = useState(
    isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
  );
  const [date, setDate] = useState(defaultStartDate);
  const [startDate, setStartDate] = useState(defaultStartDate);
  const [endDate, setEndDate] = useState(defaultEndDate);

  const disabled =
    selected === FILTER_DAY
      ? isAfter(minDate, date) && isBefore(maxDate, date)
      : isAfter(startDate, endDate);

  const buttons = [
    {
      label: <FormattedMessage id="label.single-day" defaultMessage="Single day" />,
      value: FILTER_DAY,
    },
    {
      label: <FormattedMessage id="label.date-range" defaultMessage="Date range" />,
      value: FILTER_RANGE,
    },
  ];

  function handleSave() {
    if (selected === FILTER_DAY) {
      onChange({ ...getDateRangeValues(date, date), value: 'custom' });
    } else {
      onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
    }
  }

  return (
    <div className={styles.container}>
      <div className={styles.filter}>
        <ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
      </div>
      <div className={styles.calendars}>
        {selected === FILTER_DAY ? (
          <Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
        ) : (
          <>
            <Calendar
              date={startDate}
              minDate={minDate}
              maxDate={endDate}
              onChange={setStartDate}
            />
            <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
          </>
        )}
      </div>
      <FormButtons>
        <Button variant="action" onClick={handleSave} disabled={disabled}>
          <FormattedMessage id="label.save" defaultMessage="Save" />
        </Button>
        <Button onClick={onClose}>
          <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
        </Button>
      </FormButtons>
    </div>
  );
}

export default function DateRangePickerCalendar({
  locale,
  startDate,
  endDate,
  focus,
  month: receivedMonth,
  onStartDateChange,
  onEndDateChange,
  onFocusChange,
  onMonthChange,
  minimumDate,
  maximumDate,
  minimumLength,
  maximumLength,
  modifiers: receivedModifiers,
  modifiersClassNames,
  weekdayFormat,
  touchDragEnabled
}) {
  const [hoveredDate, setHoveredDate] = useState()
  const [month, setMonth] = useControllableState(
    receivedMonth,
    onMonthChange,
    startOfMonth(startDate || endDate || new Date())
  )

  const displayedStartDate =
    focus === START_DATE && !startDate && endDate && hoveredDate && !isSameDay(hoveredDate, endDate)
      ? hoveredDate
      : startOfDay(startDate)

  const displayedEndDate =
    focus === END_DATE && !endDate && startDate && hoveredDate && !isSameDay(hoveredDate, startDate)
      ? hoveredDate
      : startOfDay(endDate)

  const isStartDate = date => isSameDay(date, displayedStartDate) && isBefore(date, displayedEndDate)
  const isMiddleDate = date => isAfter(date, displayedStartDate) && isBefore(date, displayedEndDate)
  const isEndDate = date => isSameDay(date, displayedEndDate) && isAfter(date, displayedStartDate)

  const modifiers = mergeModifiers(
    {
      selected: date =>
        isSelectable(date, { minimumDate, maximumDate }) &&
        (isStartDate(date) ||
          isMiddleDate(date) ||
          isEndDate(date) ||
          isSameDay(date, startDate) ||
          isSameDay(date, endDate)),
      selectedStart: isStartDate,
      selectedMiddle: isMiddleDate,
      selectedEnd: isEndDate,
      disabled: date =>
        (focus === START_DATE &&
          endDate &&
          ((differenceInDays(startOfDay(endDate), date) < minimumLength && (!startDate || !isAfter(date, startOfDay(endDate)))) ||
            (!startDate && maximumLength && differenceInDays(startOfDay(endDate), date) > maximumLength))) ||
        (focus === END_DATE &&
          startDate &&
          ((differenceInDays(date, startOfDay(startDate)) < minimumLength && (!endDate || !isBefore(date, startOfDay(startDate)))) ||
            (!endDate && maximumLength && differenceInDays(date, startOfDay(startDate)) > maximumLength)))
    },
    receivedModifiers
  )

  const handleSelectDate = date => {
    if (focus === START_DATE) {
      const invalidEndDate =
        endDate && !isRangeLengthValid({ startDate: date, endDate }, { minimumLength, maximumLength })

      if (invalidEndDate) {
        onEndDateChange(null)
      }

      onStartDateChange(startDate ? setTime(date, startDate) : date)
      onFocusChange(END_DATE)
    } else if (focus === END_DATE) {
      const invalidStartDate =
        startDate && !isRangeLengthValid({ startDate, endDate: date }, { minimumLength, maximumLength })

      if (invalidStartDate) {
        onStartDateChange(null)
      }

      onEndDateChange(endDate ? setTime(date, endDate) : date)
      onFocusChange(invalidStartDate || !startDate ? START_DATE : null)
    }
  }

  return (
    <Calendar
      locale={locale}
      month={month}
      onMonthChange={setMonth}
      onDayHover={setHoveredDate}
      onDayClick={handleSelectDate}
      minimumDate={minimumDate}
      maximumDate={maximumDate}
      modifiers={modifiers}
      modifiersClassNames={modifiersClassNames}
      weekdayFormat={weekdayFormat}
      touchDragEnabled={touchDragEnabled}
    />
  )
}