# DateQuickFilter 日期快速筛选

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/date-quick-filter/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s44
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[DateQuickFilter]

## 代码演示

### 选择日

以「日」为基本单位，日期选择器的简化控件

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

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

type DateType = DatePickerDateType

type DayDemoProps = {}
type DayDemoState = {
  value: DateType;
}

const style: CSSProperties = {
  border: '1px solid red',
}
export default class DateQuickFilterDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DateQuickFilterDemo) {
    super(props)
    this.state = {
      value: '2021-1-1'
    }
  }

  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>
        <DateQuickFilter
          defaultValue={new Date()}
          onChange={this.onChange} />
        <br />
        <br />
        <p>禁用</p>
        <DateQuickFilter
          disabled
          defaultValue={'2020-9-1'}
        />
        <br />
        <br />
        <p>只读</p>
        <DateQuickFilter
          readOnly
          defaultValue={'2020-9-1'} />
        <br />
        <br />
        <p>受控：value为2021-1-1</p>
        <div style={{ display: 'flex' }}>
          <DateQuickFilter
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange} />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2021-01-01</p>
        <DateQuickFilter
          value={new Date('2021-01-01').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange} />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DateQuickFilter
          defaultValue={new Date()}
          format={'Date'}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY'}</p>
        <DateQuickFilter
          defaultValue={new Date()}
          onChange={this.onChange}
          showFormat={'DD/MM/YYYY'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY'}</p>
        <DateQuickFilter
          defaultValue={new Date()}
          onChange={this.onChange}
          showFormat={'MM.DD.YYYY'}
        />
        <br />
        <br />
        <p>使用 weekStart 更改每周的开始天</p>
        <DateQuickFilter
          weekStart={3}
          defaultValue={new Date()}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>使用 showDayFooter 隐藏底部快捷选择栏</p>
        <DateQuickFilter
          showDayFooter={false}
          defaultValue={'2019-12-25'}
        />
        <br />
        <br />
        <p>限定日期范围：传入的minDate为2020-01-01，maxDate为'new Date()'</p>
        <DateQuickFilter
          minDate={'2020-01-01'}
          maxDate={`${new Date()}`}
        />
        <br />
        <br />
        <p>传入日期不在范围内时，按原数据显示</p>
        <DateQuickFilter
          defaultValue={'2019-12-25'}
          minDate={'2020-01-01'}
          maxDate={`${new Date()}`}
        />
        <br />
        <br />
        <p>自定义className、style与自定义triggerProps</p>
        <DateQuickFilter
          width={200}
          onChange={this.onChange}
          className={'date-quick-filter-demo'}
          triggerProps={{ popupPlacement: 'right' }}
          style={style}
        />
        <br />
        <br />
        <p>宽度不够时</p>
        <DateQuickFilter
          width={0}
          defaultValue={'2020-9-1'}
        />
      </div>
    )
  }
}
```

### 选择月

以「月」为基本单位，日期选择器的简化控件

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

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

type DateType = DatePickerDateType

type DayDemoProps = {}
type DayDemoState = {
  value: DateType;
}
export default class DateQuickFilterDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DateQuickFilterDemo) {
    super(props)
    this.state = {
      value: '2020-12',
    }
  }

  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>
        <DateQuickFilter
          type={`month`}
          defaultValue={new Date()}
          onChange={this.onChange} />
        <br />
        <br />
        <p>受控：value为2020-12</p>
        <div style={{ display: 'flex' }}>
          <DateQuickFilter
            type={`month`}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange} />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2020-12</p>
        <DateQuickFilter
          type={`month`}
          value={new Date('2020-12').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange} />
      </div>
    )
  }
}
```

### 选择年

以「年」为基本单位，日期选择器的简化控件

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

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

type DateType = DatePickerDateType

type DayDemoProps = {}
type DayDemoState = {
  value: DateType;
}
export default class DateQuickFilterDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DateQuickFilterDemo) {
    super(props)
    this.state = {
      value: '2020',
    }
  }

  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>
        <DateQuickFilter
          type={`year`}
          defaultValue={new Date()}
          onChange={this.onChange} />
        <br />
        <br />
        <p>受控：value为2020</p>
        <div style={{ display: 'flex' }}>
          <DateQuickFilter
            type={`year`}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange} />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2020</p>
        <DateQuickFilter
          type={`year`}
          value={new Date('2020').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange} />
      </div>
    )
  }
}
```

### 选择周

以「周」为基本单位，用于快速选择单周

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

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

type DateType = DatePickerDateType

type DayDemoProps = {}
type DayDemoState = {
  value: DateType;
}
export default class DateQuickFilterDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DateQuickFilterDemo) {
    super(props)
    this.state = {
      value: '2020-12-15',
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    Array.isArray(value) && this.setState({ value: value[0] })
  }
  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>
        <DateQuickFilter
          type={`week`}
          defaultValue={new Date()}
          onChange={this.onChange} />
        <br />
        <br />
        <p>受控：value为2020-12-15</p>
        <div style={{ display: 'flex' }}>
          <DateQuickFilter
            type={`week`}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange}
          />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2020-12-15</p>
        <DateQuickFilter
          type={`week`}
          value={new Date('2020-12-15').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange} />
        <br />
        <br />
        <p>使用 format 指定抛出数据格式</p>
        <DateQuickFilter
          type={`week`}
          format={`Date`}
          onChange={this.onChange} />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'DD/MM/YYYY'}</p>
        <DateQuickFilter
          type={`week`}
          onChange={this.onChange}
          defaultValue={new Date()}
          showFormat={'DD/MM/YYYY'}
        />
        <br />
        <br />
        <p>使用 showFormat 指定显示在输入框中的格式 showFormat={'MM.DD.YYYY'}</p>
        <DateQuickFilter
          type={`week`}
          onChange={this.onChange}
          defaultValue={new Date()}
          showFormat={'MM.DD.YYYY'}
        />
        <br />
        <br />
        <p>使用 weekStart 更改每周的开始天</p>
        <DateQuickFilter
          type={`week`}
          weekStart={3}
          onChange={this.onChange} />
        <br />
        <br />
        <p>宽度不够时</p>
        <DateQuickFilter
          width={0}
          type={`week`}
          defaultValue={new Date()} />
      </div>
    )
  }
}
```

### 选择双周

以「双周」为基本单位，用于快速选择双周

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

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

type DateType = DatePickerDateType

type DayDemoProps = {}
type DayDemoState = {
  value: DateType;
}
export default class DateQuickFilterDemo extends Component<DayDemoProps, DayDemoState> {

  constructor(props: DateQuickFilterDemo) {
    super(props)
    this.state = {
      value: '2020-12-25'
    }
  }

  onChange = (value: DateType | DateType[]) => { console.info('onChange', value) }
  onValueChange = (value: DateType | DateType[]) => {
    console.info('onValueChange', value)
    this.setState({ value: (value as DateType[])[0] })
  }
  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>
        <DateQuickFilter
          type={`doubleWeek`}
          defaultValue={new Date()}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控：value为2020-12-25</p>
        <div style={{ display: 'flex' }}>
          <DateQuickFilter
            type={`doubleWeek`}
            value={this.state.value}
            onPanelOpen={this.onPanelOpen}
            onPanelClose={this.onPanelClose}
            onChange={this.onValueChange} />
          &nbsp;
          <Button type={'primary'} size={'small'} onClick={this.reset}>重置</Button>
        </div>
        <br />
        <p>受控不更新值：value为timestamp类型的2020-12-25</p>
        <DateQuickFilter
          type={`doubleWeek`}
          value={new Date('2020-12-15').getTime()}
          onPanelOpen={this.onPanelOpen}
          onPanelClose={this.onPanelClose}
          onChange={this.onChange} />
        <p>切换天数为14天</p>
        <DateQuickFilter
          type={`doubleWeek`}
          defaultValue={new Date()}
          onChange={this.onChange}
          doubleWeekChangeDay={14}
        />
        <br />
        <br />
      </div>
    )
  }
}
```

## API

### 类型说明：（请从@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 | 否 |  |
| value | 日期受控值 | DatePickerDateType | 否 |  |
| defaultValue | 年/月/日的默认值 | DatePickerDateType | 否 |  |
| type | 日期快速筛选的类型 | 'day' / 'month' / 'year' / 'week' / 'doubleWeek' | 否 | 'day' |
| format | 指定抛出数据格式 | 自定义标准日期格式 string / 'timestamp' / 'Date' | 否 | YYYY-MM-DD |
| showFormat | 显示在输入框中的格式 | 自定义标准日期格式 string(详情请参照下方格式化占位符列表) | 否 | YYYY-MM-DD |
| showDayFooter | 显示单选天数面板底部快捷选择栏 | boolean | 否 | true |
| dayFooterVisibilityConfig | 底部按钮展示配置 | DayFooterVisibilityConfigType | 否 |  |
| weekStart | 每周的开始天 | number (0 代表周天 6 代表周六) | 否 | 1 |
| autoFocus | 是否自动聚焦 | boolean | 否 | false |
| placeholder | 占位符 | string | 否 |  |
| minDate | 最小日期 | DatePickerDateType | 否 | 1500-01-01 |
| maxDate | 最大日期 | DatePickerDateType | 否 | 2500-01-01 |
| customDateFilter | 自定义日期过滤 | (value: DatePickerDateType) => boolean 参数为当前日期，要求返回 boolean | 否 |  |
| onChange | 选中值改变时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onPanelOpen | 面板打开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onPanelClose | 面板打开时的回调 | (value: DatePickerDateType / DatePickerDateType[]) => {} | 否 |  |
| onSelectDateChange | 双周模式的时候选中的单个日期 | (value: DateType) => void | 否 |  |
| doubleWeekChangeDay | 双周切换的时候是按照7天还是14天 | number | 否 | 7 |
### 格式化占位符列表：

| 占位符 | 输出 | 详情 |
| --- | --- | --- |
| `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 |
