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

您好，我正在使用React Datepicker处理特定的时间范围

这是我的密码：

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

类位置扩展组件{
构造函数（）{
超级（）；
此.state={
已选择开始日期：“”，
selectedEndDate:“”，
预订：{
起始日期：''，
结束日期：“”，
},
};
this.handleStartDateChange=this.handleStartDateChange.bind（this）；
this.handleEndDateChange=this.handleEndDateChange.bind（this）；
}
HandleStartDate更改（日期）{
var bookingObj=this.state.booking；
bookingObj.startDate=日期；
this.setState（{booking:bookingbj}）
}
handleEndDateChange（日期）{
var bookingObj=this.state.booking；
bookingObj.endDate=日期；
this.setState（{booking:bookingbj}）
}
render（）{
返回(
)
}
}

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

---

感谢您使用

状态设置
minDate
/
maxDate
。selectedStartDate

/

状态。selectedEndDate

但您的组件中没有此类状态，它们是未定义的

此外，在constructor中也不调用

super（props）

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

---

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

我的要求是

最小日期是当前日期
Min Time是今天的当前时间
最长时间为晚上11点59分
选择下一个日期时，您可以选择任何时间
上面我用我的状态日期检查当前日期，我的
pickupDate
状态最初为
null
，这就是为什么我最初给日期加上
integer
时间戳的原因

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

如果该值为真，则它会将当前时间设置为
minDate
，否则它会将小时、分钟和秒设置为
0
，以添加selectedStartDate和selectedEndDate作为状态的一部分。添加这些值，并确认它是否正在工作最小值和最大日期现在已设置，但时间未设置已添加，但时间范围未设置如何添加，哪些值？更新您的问题，可能会添加一些sandboxi使用最小时间作为所选日期，但我不想设置最大时间，如果我删除maxTime，则会出现错误“需要minTime和maxTime道具”。您有编辑按钮，请勿将答案用作注释部分
// 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()

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