# MonthDayPicker 月日选择器

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/month-day-picker/freepass)
- 平台：PC
- 维护者：屈正巍
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MonthDayPicker]

## 代码演示

### 月份和日期

在同一个选择器里便捷选择月份和日期

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

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

type DateType = DatePickerDateType

type MonthDayPickerDemoState = {
  value: string;
}

export default class MonthDayPickerDemo extends Component<any, MonthDayPickerDemoState> {

  constructor(props: MonthDayPickerDemo) {
    super(props)
    this.state = {
      value: '10-22'
    }
  }

  onChange = (value: DateType | DateType[]) => {
    console.info('onChange', value)
  }

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

  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>
        <MonthDayPicker
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>禁用</p>
        <MonthDayPicker
          defaultValue={'10-22'}
          disabled
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>只读</p>
        <MonthDayPicker
          defaultValue={'10-22'}
          readOnly
          onChange={this.onChange}
        />
        <br />
        <p>受控：value为10-22</p>
        <div style={{ display: 'flex' }}>
          <MonthDayPicker
            value={this.state.value}
            onChange={this.onValueChange}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为10-22</p>
        <MonthDayPicker
          value={'10-22'}
          onChange={this.onChange}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
        />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <MonthDayPicker
          year={2018}
          format={'Date'}
          onChange={this.onChange}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
        />
        <br />
        <br />
        <p>使用 bindTriggerContainer 固定弹出面板</p>
        <MonthDayPicker
          bindTriggerContainer
        />
        <br />
        <br />
        <p>不显示清空按钮</p>
        <MonthDayPicker
          defaultValue={'10-22'}
          allowClear={false}
        />
      </div>

    )
  }
}
```

## API

### 注意：

```
1.当使用format对抛出日期进行格式化时，会抛出合并传入的year后的标准格式，若未传入year，则默认为今年
```

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

```typescript
1.日期类型
type DatePickerDateType = string | number | Date ｜Dayjs;
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| disabled | 选择器是否禁用 | boolean | 否 | false |
| readOnly | 选择器是否完全只读 | boolean | 否 | false |
| triggerProps | trigger 的 props | 参考 trigger 组件的 props | 否 |  |
| bindTriggerContainer | 是否将 trigger 弹出层固定在该节点下 | boolean | 否 | false |
| width | 选择器宽度 | number | 否 |  |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| year | 指定选择器的年份 | number |  | 今年 |
| value | 月日受控值 | string | 否 |  |
| defaultValue | 月日默认值 | string | 否 |  |
| format | 指定抛出数据格式 | 自定义标准日期格式 string / 'timestamp' / 'Date' | 否 | MM-DD |
| autoFocus | 是否自动聚焦 | boolean | 否 | false |
| placeholder | 占位符 | string | 否 |  |
| onChange | 选中值改变时的回调 | (value: DatePickerDateType) => {} | 否 |  |
| onPanelOpen | 面板打开时的回调 | (value: DatePickerDateType) => {} | 否 |  |
| onPanelClose | 面板打开时的回调 | (value: DatePickerDateType) => {} | 否 |  |
| allowClear | 是否展示清空按钮 | boolean | 否 | true |
| needMaxWidth | 是否限制最大宽度 | boolean | 否 | true |
| maxWidth | 最大宽度 | number | 否 | true |
### 格式化占位符列表：

| 占位符 | 输出 | 详情 |
| --- | --- | --- |
| `YY` | 18 | 两位数的年份 |
| `YYYY` | 2018 | 四位数的年份 |
| `M` | 1-12 | 月份，从 1 开始 |
| `MM` | 01-12 | 月份，两位数 |
| `MMM` | Jan-Dec | 缩写的月份名称 |
| `MMMM` | January-December | 完整的月份名称 |
| `D` | 1-31 | 月份里的一天 |
| `DD` | 01-31 | 月份里的一天，两位数 |
| `d` | 0-6 | 一周中的一天，星期天是 0 |
| `dd` | Su-Sa | 最简写的星期几 |
| `ddd` | Sun-Sat | 简写的星期几 |
| `dddd` | Sunday-Saturday | 星期几 |
| `H` | 0-23 | 小时 |
| `HH` | 00-23 | 小时，两位数 |
| `h` | 1-12 | 小时, 12 小时制 |
| `hh` | 01-12 | 小时, 12 小时制, 两位数 |
| `m` | 0-59 | 分钟 |
| `mm` | 00-59 | 分钟，两位数 |
| `s` | 0-59 | 秒 |
| `ss` | 00-59 | 秒 两位数 |
| `SSS` | 000-999 | 毫秒 三位数 |
| `Z` | +05:00 | UTC 的偏移量，±HH:mm |
| `ZZ` | +0500 | UTC 的偏移量，±HHmm |
| `A` | AM PM |  |
| `a` | am pm |  |
#### 支持的本地化格式列表

| 占位符 | 英语语言 | 示例输出 |
| --- | --- | --- |
| `LT` | h:mm A | 8:02 PM |
| `LTS` | h:mm:ss A | 8:02:18 PM |
| `L` | MM/DD/YYYY | 08/16/2018 |
| `LL` | MMMM D, YYYY | August 16, 2018 |
| `LLL` | MMMM D, YYYY h:mm A | August 16, 2018 8:02 PM |
| `LLLL` | dddd, MMMM D, YYYY h:mm A | Thursday, August 16, 2018 8:02 PM |
| `l` | M/D/YYYY | 8/16/2018 |
| `ll` | MMM D, YYYY | Aug 16, 2018 |
| `lll` | MMM D, YYYY h:mm A | Aug 16, 2018 8:02 PM |
| `llll` | ddd, MMM D, YYYY h:mm A | Thu, Aug 16, 2018 8:02 PM |
