使用自定义按钮打开DatePicker或DatePickerDialog

Question

有没有办法触发DatePickerDialog使用除了DatePicker开箱即用的内置input之外的外部控件/按钮打开？

我们正在使用material-ui库。

Answer 1

由于对话open状态由material-ui组件内部处理，唯一的方法是使用ref中的DatePicker并调用focus() }。有点黑客 - 但它有效......

示例：

<DatePicker
    ref='datePickerStartDate'
    errorStyle={componentSyles.error}
    textFieldStyle={componentSyles.textField}
    DateTimeFormat={Intl.DateTimeFormat}
    cancelLabel={cancelLabel}
    autoOk={true}
    {...this.props}
     />

<FontIcon
    onClick={(e) => { this.refs.datePickerStartDate.focus() }}
    className="material-icons" style={componentSyles.icon}>
    date_range
</FontIcon>