import 'rmc-picker/assets/index.css' ; import 'rmc-date-picker/assets/index.less' ; import 'rmc-picker/assets/popup.css' ; import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import PopPicker from '../src/Popup' ; import DatePicker from '../src/DatePicker' ; import zhCn from '../src/locale/zh_CN' ; import enUs from '../src/locale/en_US' ; import { cn , format , minDate , maxDate , now } from './utils' ; class Demo extends React . Component < any , any > { static defaultProps = { mode : 'datetime' , locale : cn ? zhCn : enUs , } ; constructor ( props ) { super ( props ) ; this . state = { date : null , } ; } onChange = ( date ) => { console . log ( 'onChange' , format ( date ) ) ; this . setState ( { date , } ) ; } ; onDismiss = ( ) => { console . log ( 'onDismiss' ) ; } ; show = ( ) => { console . log ( 'my click' ) ; } ; render ( ) { const props = this . props ; const { date } = this . state ; const datePicker = ( < DatePicker rootNativeProps = { { 'data-xx' : 'yy' } } minDate = { minDate } maxDate = { maxDate } defaultDate = { now } mode = { props . mode } locale = { props . locale } / > ) ; return ( < div style = { { margin : '10px 30px' } } > < h2 > popup date picker < /h2> < div > < PopPicker datePicker = { datePicker } transitionName = "rmc-picker-popup-slide-fade" maskTransitionName = "rmc-picker-popup-fade" title = "Date picker" date = { date } onDismiss = { this . onDismiss } onChange = { this . onChange } > < button onClick = { this . show } > { date && format ( date ) || 'open' } < /button> < /PopPicker> < /div> < /div>); } } ReactDOM . render ( < Demo />, document.getElementById('__react-content'));