Material UI：DatePickerの外でDatePickerDialogを使用するには？

Question

なしでDatePickerDialogを使用できますか？私がこれをやりたいのは、DatePickerのTextFieldよりも既存のデータのフォーマット方法をもっとコントロールしたいからです。

私が試した、これは私が得たもので、すべての日付が文字化けしている：

は、ここに私のコードです：

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

私はある既存のアプリにこれを埋め込むいますジャストノート反応しないので、私はMuiThemeProviderをそこに置いたのです。

別の考慮事項は、日付と時刻の両方のピッカーの部分をシームレスなエクスペリエンスに組み込む派生物DateTimePickerを構築することです。

DatePickerなしでDatePickerDialogを使用する方法についてのご意見はありますか？

Answer 1

テキストフィールドコンポーネントを非表示にして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> 
) 
} 

Answer 2

TL; DR：あなたは<DatePickerDialog>にfirstDayOfWeekを提供する必要がある、またはそれが壊れた状態でレンダリングします。

---

同じレイアウトで問題が発生しました。解決策は、単にもっと多くの小道具を指定することでした。また、ダイアログのどこかをクリックすると閉じることができました（つまり、&月のコントロールが機能していないなど）。

私は<DatePicker>が<DatePickerDialog>の管理方法を確認するために材料-UIソース内の周り掘って、<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年前のre：jQueryからthis very similar question of mineを参照してください。