Allow only times in the future

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.

[GeorgeWL]

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

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

[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}
          />
    );
  }
}