E10:ECODE开发组件库@weapp/ui

import { Component } from "react";
import { constants, DatePicker, Button, DatePickerDateType } from "@weapp/ui";

type DateType = DatePickerDateType

type OthersDemoProps = {}
type OthersDemoState = {
  value?: DateType;
}

const prefixCls = `${constants.uiPcClsPrefix}-demo-datepicker`;

export default class DatePickerDemo extends Component<OthersDemoProps, OthersDemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: '2021-01',
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as DateType })
  }
  onPanelOpen = (value: DateType | DateType[]) => { console.info('onPanelOpen', value) }
  onPanelClose = (value: DateType | DateType[]) => { console.info('onPanelClose', value) }
  reset = () => { this.setState({ value: '' }) }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DatePicker weId={`${this.props.weId || ''}_f0vxr1`}
          type={'month'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为2021-01</p>
        <div style={{ display: 'flex' }}>
          <DatePicker weId={`${this.props.weId || ''}_qdmzsk`}
            type={'month'}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button weId={`${this.props.weId || ''}_rqdg5y`} type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2021-01</p>
        <DatePicker weId={`${this.props.weId || ''}_f9eeqi`}
          type={'month'}
          value={new Date('2021-01').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange}
        />
        <br />
        <br />
      </div>
    )
  }
}

ReactDOM.render(<DatePickerDemo />, document.getElementById('root'));