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

您将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 2

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

我的要求是

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

// 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 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}

/>

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

3 个答案: