React-datepicker: Allow only times in the future

[mindhaq]

I would like to set a restriction on the possible times which can be selected. Only times in the future should be possible.

On today's day (2020-03-01 17:13) I want no dates from the past, and no hours before 18:00 to be selectable.

On every future day, all possible times should be selectable.

I can get the part with the dates working by setting minDate, but I can't see any option for the time restriction.

[pdziwoki]

You can probably make it dynamic in your code inside and pass list of available times via includeTimesprop.

[GeorgeWL]

minDate={moment(new Date()).startOf('day').toDate()}

the equivalent can be done with dayjs, or through native functions.

[CharanRoot]

any update on issue ? how to restrict user not select time restriction @mindhaq

[Valerika]

@mindhaq This code is working.
I'm using this component for resolving this issue.

import React, { Component } from "react";
import DatePicker from "react-datepicker";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";

dayjs.extend(duration);

export default class MyDatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
  }

  handleChange = (date) => {
    const { onChangeInput } = this.props;
    this.setState({
      startDate: date
    });
    const isoDate = dayjs(date || 0).format("YYYY-MM-DDTHH:mm:ssZ");
    onChangeInput(isoDate);
  };

  round = (date, duration, method) => {
    method = method || "floor";
    return new Date(Math[method](+date / +duration) * +duration);
  };

  render() {
    const { labelText, id, selectedParent, value } = this.props;

    const now = new Date();
    const startDate = this.state.startDate;

    const startDPConf = {
      minDate: now,
      showTimeSelect: true,
      timeFormat: "HH:mm",
      selected: Date.parse(startDate),
      timeIntervals: 15
    };

    if (dayjs(startDate).isSame(dayjs(now), "day")) {
      startDPConf.minTime = this.round(dayjs(now).valueOf(), 15, "ceil");
      startDPConf.maxTime = this.round(dayjs(now).endOf("day").valueOf(), 15, "floor");
    }

    return (
          <DatePicker
            {...startDPConf}
            onChange={this.handleChange}
            onKeyDown={(e) => e.preventDefault(e)}
            id={id}
            {...this.props}
          />
    );
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[YueminHu]

my solution:
https://stackblitz.com/edit/react-vjt4y3
it allows to pick times only >72hours from now

this can be easily modify to picking only future hours

const hourMilliSeconds = 1000 * 3600;

const addDays = (d, num) => {
  let time = d.getTime();
  time += hourMilliSeconds * 24 * num;
  return new Date(time);
};

const setMinutes = (d, minute) => {
  d.setMinutes(minute);
  return d;
};

const setHours = (d, hour) => {
  d.setHours(hour);
  return d;
};

const getNearestHour = () => {
  const now = new Date().getTime();
  return new Date(now - (now % hourMilliSeconds) + hourMilliSeconds);
};

const PredictionSlot = props => {
  const [date, setDate] = React.useState(addDays(getNearestHour(), 3));
  const [disabledHours, setDisabledHours] = React.useState(
    setHours(setMinutes(new Date(), 0), 0)
  );

  const calculateDisabledHours = (date, onwards = 72) => {
    const startOfTheDay = new Date(
      date.getTime() - (date.getTime() % (24 * hourMilliSeconds))
    );
    if (
      startOfTheDay.getTime() - new Date().getTime() <=
      onwards * hourMilliSeconds
    ) {
      const nearestHour = getNearestHour();
      const daysLater = nearestHour.getTime() + onwards * hourMilliSeconds;
      const disabledHours = new Date(daysLater).getHours();
      setDisabledHours(setHours(setMinutes(new Date(), 0), disabledHours));
    } else {
      setDisabledHours(setHours(setMinutes(new Date(), 0), 0));
    }
  };

  React.useEffect(() => {
    calculateDisabledHours(date);
  }, [date]);

  return (
    <DatePicker
      selected={date}
      onChange={setDate}
      minTime={disabledHours}
      maxTime={setHours(setMinutes(new Date(), 0), 23)}
      minDate={addDays(new Date(), 3)}
      showTimeSelect
      placeholderText={"Select Date & Time"}
      dateFormat="MMMM d, yyyy HH:mm"
      // excludeTimes={excludeTimes}
      timeIntervals={60}
    />
  );
};