在反应日期选择器中将选定的开始时间设置为结束日期的最小时间

Question

您好，我在特定时间范围内使用 React Datepicker。

https://reactdatepicker.com/#example-specific-time-range.

这是我的代码：

class Location extends Component {
constructor() {
    super();
    this.state = {
       selectedStartDate: '',
       selectedEndDate: '',
        booking: {
            startDate: '',
            endDate: '',
        },
    };

    this.handleStartDateChange = this.handleStartDateChange.bind(this);
    this.handleEndDateChange = this.handleEndDateChange.bind(this);
}


handleStartDateChange(date) {
    var bookingObj = this.state.booking;
    bookingObj.startDate = date;
    this.setState({ booking: bookingObj})
}

handleEndDateChange(date) {
    var bookingObj = this.state.booking;
    bookingObj.endDate = date;
    this.setState({ booking: bookingObj})
}

render() {
    return (
        <div className="row">
            <div className="col-md-12 col-lg-12 start_boxx">
                <div className="row">
                    <div className="col-sm-12">
                        <div className="form-group date_time">
                            <DatePicker
                                className="form-control dtepickr"
                                placeholderText="Click to select start Date"
                                selected={this.state.booking.startDate}
                                onChange={this.handleStartDateChange}
                                minDate={this.state.selectedStartDate}
                                maxDate={this.state.selectedEndDate}
                                showTimeSelect
                                dateFormat="dd-MM-yyyy HH:mm aa"  
                            />
                        </div>
                        <div className="form-group date_time">
                            <DatePicker
                                className="form-control dtepickr"
                                placeholderText="Click to select end Date"
                                selected={this.state.booking.endDate}
                                onChange={this.handleEndDateChange}
                                minDate={this.state.selectedStartDate}
                                maxDate={this.state.selectedEndDate}
                                showTimeSelect
                                minTime={this.state.booking.startDate}
                                maxTime={this.state.booking.??}
                                dateFormat="dd-MM-yyyy HH:mm aa"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
}

我想将我的开始时间设置为结束日期的最短时间。 我使用 minTime 和 maxTime 功能但不起作用。 请帮助我摆脱困境。 谢谢

Answer 1

我正在尝试找到没有任何库的本机解决方案，我做到了。 希望对你有用。

我的要求是

1. Min Date 是当前日期
2. Min Time 是今天的当前时间
3. 所有人的最大时间为晚上 11:59
4. 当您选择下一个日期时，您可以选择任何时间

// initialValue of pickupDate is null
<DatePicker
  selected={values.pickupDate}
  onChange={date => handleChange('pickupDate', date)}
  showTimeSelect
  dateFormat="dd-MM-yyyy h:mm aa"
  placeholderText="Pick up date & time"
  isClearable
  minDate={new Date()}
  minTime={
    new Date().getDate() ===
    new Date(values.pickupDate ?? new Date().getTime()).getDate()
      ? new Date()
      : new Date().setHours(0, 0, 0)
  }
  maxTime={new Date().setHours(23, 59, 59)}
/>

new Date().getDate() === new Date(values.pickupDate ?? new Date().getTime()).getDate()

上面我用我的状态日期检查当前日期，我的 pickupDate 状态最初是 null 这就是为什么我最初给出 integer 时间戳的原因

? new Date() : new Date().setHours(0, 0, 0)

如果为真，则将当前时间设为minDate，否则将设置小时、分钟和秒为0

Answer 2

您将minDate/maxDate 设置为state.selectedStartDate/state.selectedEndDate，但您的组件中没有此类状态，它们是未定义的。

另外，您不要在构造函数中调用super(props)。

class Location extends Component {
  //            v Call props
  constructor(props) {
    super(props);
    this.state = {
      booking: {
        startDate: '',
        endDate: ''
      },
      selectedStartDate: /* Some value */,
      selectedEndDate: /* Some  value */
    };
  }
}

Answer 3

<DatePicker
className="form-control dtepickr"
placeholderText="Click to select end Date"
selected={this.state.booking.endDate}
onChange={this.handleEndDateChange}
minDate={this.state.selectedStartDate}
maxDate={this.state.selectedEndDate}
showTimeSelect
minTime={this.state.booking.startDate}
maxTime={this.state.booking.??}
dateFormat="dd-MM-yyyy HH:mm aa"
disabled={this.state.isEndDateDisable}

/>