打開DatePicker或DatePickerDialog使用自定義按鈕

Question

有沒有什麼辦法可以觸發DatePickerDialog打開使用外部控件/按鈕而不是內置的input與DatePicker框出來？

我們正在使用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>