Material UI : DatePicker 외부에서 DatePickerDialog를 사용하는 방법?

Question

없이 DatePickerDialog을 사용할 수 있습니까? 기존의 데이터 형식을보다 구체화하려면 에있는 TextField보다 더 많은 제어가 필요합니다.

나는 노력이 나는, 모든 날짜가 왜곡되어있어 무엇 : I는 이미 존재하는 응용 프로그램에이를 내장하고

<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 결혼이 물신을 가지고 나에게 재미있다. 예를 들어, this very similar question of mine에서 4 년 전 re : jQuery를 참조하십시오.