使用自定义按钮打开DatePicker或DatePickerDialog [英] Open DatePicker or DatePickerDialog using custom button

问题描述

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

Is there any way to trigger the DatePickerDialog to open using an external control / button other than the built in input that comes out of the box with the DatePicker?

我们正在使用 material-ui 库.

推荐答案

由于对话框 open 状态由 material-ui 组件在内部处理，因此唯一的方法它将使用 DatePicker 中的 ref 并调用 focus().有点骇人听闻-但确实有效.

Since the dialog open state is handled internally by material-ui components, the only way to do it would be using ref in the DatePicker and calling focus(). Kind of a hack - but it works..

示例:

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！