# DatePanel 日期面板

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/date-panel/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s24

## 代码演示

### 时间面板

时间面板

```jsx
import { Component } from "react";
import { constants, TimePicker } from "@weapp/ui";

type TimeDemoStates = {
  value: string;
  value1: string
}

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      value: '12:0:0',
      value1: '12:0:0',
    }
  }

  onChange = (value: string | string[]) => { console.info('onChange', value) }
  onValueChange = (value: string | string[]) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }
  onValue1Change = (value: string | string[]) => {
    console.info('onValueChange', value)
    this.setState({ value1: value as string })
  }

  render() {
    const { value, value1 } = this.state
    return (
      <div className={prefixCls}>
        <p>时间面板</p>
        <TimePicker
          panelType={'simple'}
          defaultValue={'12:12'}
          onChange={this.onChange}
          onlyPanel
        />
        <br />
        <br />
        <p>时间面板受控</p>
        <TimePicker
          panelType={'simple'}
          format={'HH:mm:ss'}
          value={value}
          onChange={this.onValueChange}
          onlyPanel
        />
        <br />
        <br />
        <p>时间面板(分秒详细)</p>
        <TimePicker
          defaultValue={'12:12'}
          onChange={this.onChange}
          onlyPanel
        />
        <br />
        <br />
        <p>时间面板(分秒详细)受控</p>
        <TimePicker
          value={value1}
          format={'HH:mm:ss'}
          onChange={this.onValue1Change}
          onlyPanel
        />
        <br />
        <br />
        <p>时间面板,系统配置控制</p>
        <TimePicker
          value={value1}
          format={'HH:mm:ss'}
          onChange={this.onValue1Change}
          onlyPanel
        />
      </div>
    )
  }
}
```

### 日期面板

日期面板

```jsx
import { Component } from "react";
import { constants, DatePicker } from "@weapp/ui";

type TimeDemoStates = {
  value: any;
}

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      value: new Date(),
    }
  }

  onChange = (value: any) => { console.info('onChange', value) }
  onValueChange = (value: any) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }

  render() {
    const { value } = this.state
    return (
      <div className={prefixCls}>
        <p>日期面板</p>
        <DatePicker
          defaultValue={new Date()}
          onChange={this.onChange}
          onlyPanel
        />
        <br />
        <br />
        <p>日期面板受控</p>
        <DatePicker
          value={value}
          onChange={this.onValueChange}
          onlyPanel
        />
      </div>
    )
  }
}
```

### 日期时间面板

日期时间面板

```jsx
import { Component } from "react";
import { constants, DateTimePicker } from "@weapp/ui";

type TimeDemoStates = {
  value: any;
  value1: any;
}

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

export default class TimePickerDemo extends Component<any, TimeDemoStates> {

  constructor(props: TimeDemoStates) {
    super(props)
    this.state = {
      value: new Date(),
      value1: new Date(),
    }
  }

  onChange = (value: any) => { console.info('onChange', value) }
  onValueChange = (value: any) => {
    console.info('onValueChange', value)
    this.setState({ value: value as string })
  }
  onValue1Change = (value: any) => {
    console.info('onValueChange', value)
    this.setState({ value1: value as string })
  }

  render() {
    const { value, value1 } = this.state
    return (
      <div className={prefixCls}>
        <p>日期时间面板</p>
        <DateTimePicker
          defaultValue={new Date()}
          onChange={this.onChange}
          onlyPanel
        />
        <br />
        <br />
        <p>日期时间面板受控</p>
        <DateTimePicker
          value={value}
          timeFormat={'HH:mm:ss'}
          onChange={this.onValueChange}
          onlyPanel
        />
        <br />
        <br />
        <p>日期时间面板</p>
        <DateTimePicker
          panelType={'flat'}
          defaultValue={new Date()}
          onChange={this.onChange}
          onlyPanel
        />
        <br />
        <br />
        <p>日期时间面板受控</p>
        <DateTimePicker
          panelType={'flat'}
          value={value1}
          timeFormat={'HH:mm:ss'}
          onChange={this.onValue1Change}
          onlyPanel
        />
        <br />
        <br />
        <p>日期时间面板(系统配置控制展现形式)</p>
        <DateTimePicker
          defaultValue={new Date()}
          onChange={this.onChange}
          onlyPanel
        />
      </div>
    )
  }
}
```

## 说明

```
1.此demo为日期、时间面板的单面板模式，具体api使用请参考对应的组件使用
```
