当日期选择器关闭时(仅在日期选择器外部单击时)调用函数

时间:2019-08-22 20:54:46

标签: javascript reactjs react-datepicker

是否可以将日期选择器设置为仅在我在日期选择器外部单击时关闭?关闭日历时,如果选择了日期,则会调用alertDate函数吗?

此处的代码:https://stackblitz.com/edit/react-o8dm7y

class App extends Component {
  constructor() {
    super();
    this.state = {
      selectedDate: '',
      arrayDates: []
    };
  }

  handleChangeDate = (date) => {
    let newArrayDates = [...this.state.arrayDates]
    newArrayDates.push(date)

    this.setState({
      selectedDate: date,
      arrayDates: newArrayDates
    })
  }

  alertDate = () => {
    console.log(this.state.selectedDate)
  }

  render() {
    console.log(this.state.arrayDates)
    return (
      <div>
         <DatePicker
            selected={this.state.selectedDate}
            onChange={this.handleChangeDate}
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={15}
            dateFormat="MMMM d, yyyy h:mm aa"
            timeCaption="time"
            placeholderText="Choose date..."
          />
      </div>
    );
  }
}

1 个答案:

答案 0 :(得分:1)

以下是您解决问题的方法:

  1. 您可以将Angular 7.2设置为shouldCloseOnSelect以仅在外部单击时关闭日期选择器。
  2. 要调用false,可以将其放入alertDate回调中。

以下是适合您的示例示例:

onBlur

希望这会有所帮助!