Material UI：如何在DatePicker外部使用DatePickerDialog？

是否可以在沒有DatePicker的情況下使用DatePickerDialog？我想這樣做的原因是我想要更多地控制現有數據的格式，而不是允許的TextField。Material UI：如何在DatePicker外部使用DatePickerDialog？

我想，這是我得到了什麼，所有的日期出現亂碼：

這裏是我的代碼：

<MuiThemeProvider> 
    <div> 
     <span onClick={this.handleClick}>Open</span> 
     <DatePickerDialog 
     ref="dialogWindow" 
     container="inline" 
     mode="landscape" 
     /> 
    </div> 
    </MuiThemeProvider>

只是，我嵌入到現有的應用程序，這是一個音符沒有反應，所以這就是爲什麼我把MuiThemeProvider那裏。

另一個考慮因素是能夠建立一個衍生，DateTimePicker將納入日期和時間選擇器的部分成一個無縫的體驗。

有關如何在沒有DatePicker的情況下使用DatePickerDialog的想法？

來源

2016-06-28 hexsprite

有關隱藏文本字段組件並利用REF顯示對話框，然後使用onChange回調以獲取所選擇的價值是什麼？

openDatePicker(){ 
    this.refs.datepicker.openDialog() 
} 

render(){ 
    return (
    <div> 
     <RaisedButton onTouchTap={this.openDatePicker} label='open date picker' /> 
     <DatePicker textFieldStyle={{ display: 'none' }} ref='datepicker' /> 
    </div> 
) 
}

來源

2016-10-13 19:50:29

TL;博士：您需要提供firstDayOfWeek到<DatePickerDialog>，或者它呈現在一個破碎的狀態。

我遇到了同樣的佈局問題，解決方案只是指定更多的道具。我還遇到了一個問題，點擊對話框上的任何地方導致它關閉（即&月份控件不起作用）。

我周圍挖材料的UI源裏面怎麼看<DatePicker>管理<DatePickerDialog>，並注意到<DatePicker>總是計算每個值支撐該<DatePickerDialog>接受。

我還看到了如何管理打開/關閉。

這裏有一些相關的代碼片段展示瞭如何得到它的工作：

openDatePicker = (event) => { 
    this.dueDatePicker.show(); 
}; 


closeDatePicker =() => { 
    this.dueDatePicker.dismiss(); 
}; 

render() { 
    return (
     <DatePickerDialog 
      ref={(e) => this.dueDatePicker = e} 
      initialDate={this.state.date} 
      firstDayOfWeek={0} 
      mode="portrait" 
     /> 
    ); 
}

P.S：這很有趣，我認爲日期採摘社區仍然有此神物娶datepickers到文本框。例如，請參閱4年前的this very similar question of mine re：jQuery。

來源

2016-12-01 19:28:31 Tom

湯姆，我常常覺得「神物」是關係到獲得的DatePicker允許鍵盤訪問，這是鍵盤爲中心的用戶界面和可訪問性通常相當不錯。 – NealeU

Material UI：如何在DatePicker外部使用DatePickerDialog？

回答

相關問題