# DateMenu 日期菜单

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/date-menu/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/ly/lyzj2/#id=4nu83o&p=%E3%80%9012627%E3%80%91%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81%E6%8C%89%E6%9C%88%E6%88%96%E9%80%89%E9%A1%B9%E6%8B%86%E5%88%86%E5%B9%B3%E9%93%BA
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[DateMenu]

## 代码演示

### 基础用法

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

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

type DemoProps = {}
type DemoState = {
  value?: string[]
}

export default class DatePickerDemo extends Component<DemoProps, DemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: [dayjs().format('YYYY-MM'), dayjs().format('YYYY-MM')]
    }
  }
  onChange = (value: string[], item: any) => {
    console.info('value', value, 'item', item)
  }

  onValueChange = (value: string[], item: any) => {
    console.info('onValueChange', 'value', value, 'item', item)
    this.setState({ value })
  }

  render() {
    const { value } = this.state
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <DateMenu
          onChange={this.onChange}
        />
        <p>受控</p>
        <DateMenu
          value={value}
          onChange={this.onValueChange}
        />
        <p>受控不更新值</p>
        <DateMenu
          value={[dayjs().format('YYYY-MM'), dayjs().format('YYYY-MM')]}
          onChange={this.onChange}
        />
        <p>颠倒排序</p>
        <DateMenu
          order={'obverse'}
        />
      </div >
    )
  }
}
```

### 分组平铺

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

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

type DemoProps = {}
type DemoState = {}

export default class DatePickerDemo extends Component<DemoProps, DemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
    }
  }
  onChange = (value: string[], item: any) => {
    console.info('value', value, 'item', item)
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>全部分组</p>
        <DateMenu
          group={['year', 'halfYear', 'quarter', 'month']}

        />
        <p>全部分组（颠倒排序）</p>
        <DateMenu
          group={['year', 'halfYear', 'quarter', 'month']}
          order={'obverse'}
        />
        <p>支持随意组合</p>
        <DateMenu
          group={['month', 'halfYear']}
        />
        <p>按全年平铺</p>
        <DateMenu
          group={['year']}
        />
        <p>按半年度平铺</p>
        <DateMenu
          group={['halfYear']}
        />
        <p>按季度平铺</p>
        <DateMenu
          group={['quarter']}
        />
        <p>按月度平铺</p>
        <DateMenu
          group={['month']}
        />
      </div >
    )
  }
}
```

### 含最大最小值

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

type DateType = DatePickerDateType

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

type DemoProps = {}
type DemoState = {
  value?: string[]
  value1?: string[]
  minDate?: string
  maxDate?: string
}

export default class DatePickerDemo extends Component<DemoProps, DemoState> {

  constructor(props: DatePickerDemo) {
    super(props)
    this.state = {
      value: [dayjs().format('YYYY-MM'), dayjs().format('YYYY-MM')],
      value1: [dayjs().format('YYYY-MM'), dayjs().format('YYYY-MM')],
      // minDate: '2023-06-01',
      // maxDate: '2023-05-01'
    }
  }

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

  onMinValueChange = (value: DateType | DateType[]) => this.setState({ minDate: value as string })
  onMaxValueChange = (value: DateType | DateType[]) => this.setState({ maxDate: value as string })

  render() {
    const { value, value1, minDate, maxDate } = this.state
    return (
      <div className={prefixCls}>
        <p>自定义输入最大最小日期</p>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最小日期：</span>
            <DatePicker
              value={minDate}
              // type={'month'}
              onChange={this.onMinValueChange}
            />
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ display: 'flex', alignItems: 'center' }}>设置最大日期：</span>
            <DatePicker
              value={maxDate}
              // type={'month'}
              onChange={this.onMaxValueChange}
            />
          </div>
        </div>
        <p>展示Menu</p>
        <DateMenu
         
          value={value}
          onChange={this.onValueChange}
          minDate={minDate}
          maxDate={maxDate}
          order={'obverse'}
        />
        <p>展示Menu（开启limitBoundaryContain）</p>
        <DateMenu
         
          value={value1}
          onChange={this.onValue1Change}
          minDate={minDate}
          maxDate={maxDate}
          order={'obverse'}
          limitBoundaryContain
        />
      </div >
    )
  }
}
```

## API

### 类型说明：（请从@weapp/ui 中导出）

```typescript
1.按钮分组类型
type DateMenuGroupType = 'year' | 'halfYear' | 'quarter' | 'month'
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| disabled | 选择器是否禁用 | boolean | 否 | false |
| readOnly | 选择器是否完全只读 | boolean | 否 | false |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| value | 受控值 | string[] | 否 |  |
| defaultValue | 默认值 | string[] | 否 |  |
| onChange | 点击按钮回调 | (value: string[], otherParams?: any) => void | 否 |  |
| group | 分组 | DateMenuGroupType[] | 否 |  |
| order | 日期排序 | 'obverse' \| 'reverse' | 否 |  |
| minDate | 最小日期 | DateType | 否 |  |
| maxDate | 最大日期 | DateType | 否 |  |
| changeLimit | onChange事件 | 'month' \| 'day' | 否 | 'month' |
| limitBoundaryContain | 若边界日期包含在当前dateItem内，是否展示该item | boolean | 否 |  |
| onAfterChange | onchange事件后的回调 | (year: string[], selectedKey?: string, _this?: any) => void | 否 |  |
| onEmptyItemChange | 当item为空的时候的回调 | (year: string[], selectedKey?: string, _this?: any) => void | 否 |  |
