DateRangePicker反应日期使endDate不可单击

Question

In DateRangePicker, there's a start date and an end date. What I want to achieve is if the user clicked on the end date while the start date is null, do not allow him to choose the end date first, because it will introduce 2 kind of selection which can lead to confusion.

I tried this,

onFocusChange={focusedInput => {
  let focusedInputTemp = focusedInput;
  if (!this.state.startDate && focusedInput === "endDate") {
    focusedInputTemp = "startDate";
  }
  this.setState({ focusedInput: focusedInputTemp });
}}

force focusInput to be startDate if endDate is selected and if startDate is null

But then the behaviour seems break, do I missed something? The demo is here https://codesandbox.io/s/jpom95rw8w

Answer 1

You may set endDate as disabled when startDate is not filled. Just add the prop disabled={!this.state.startDate && "endDate"} to DateRangePicker .

Live demo: https://codesandbox.io/s/1o4vqp2qll