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

Question

除了 DatePicker 开箱即用的内置 input 之外，是否有任何方法可以使用外部控件/按钮触发 DatePickerDialog 打开？

我们正在使用 material-ui 库。

Answer 1

由于对话框 open 状态由 material-ui 组件在内部处理，唯一的方法是在 DatePicker 中使用 ref 并调用 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>

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

Open DatePicker or DatePickerDialog using custom button

reactjs

material-ui