feat: Quarter picker (#22468)

* support quarter picker * update snapshot * fix lint
2024-11-24 02:59:58 +08:00 · 2020-03-21 22:43:04 +08:00 · 2020-03-21 22:43:04 +08:00 · 1e95c6cef0
commit 1e95c6cef0
parent c430eab79e
10 changed files with 89 additions and 4 deletions
--- a/components/date-picker/tests/snapshots/demo.test.js.snap
+++ b/components/date-picker/tests/snapshots/demo.test.js.snap
@ -122,6 +122,46 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
    </div>
  </div>
  <br />
+  <div
+    class="ant-picker"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="Select quarter"
+        readonly=""
+        size="12"
+        title=""
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <br />
  <div
    class="ant-picker"
  >
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@ -28,6 +28,8 @@ ReactDOM.render(
    <br />
    <DatePicker onChange={onChange} picker="month" />
    <br />
+    <DatePicker onChange={onChange} picker="quarter" />
+    <br />
    <DatePicker onChange={onChange} picker="year" />
  </div>,
  mountNode,
--- a/components/date-picker/generatePicker.tsx
+++ b/components/date-picker/generatePicker.tsx
@ -99,6 +99,7 @@ export type AdditionalPickerLocaleProps = {
 export type AdditionalPickerLocaleLangProps = {
  placeholder: string;
  yearPlaceholder?: string;
+  quarterPlaceholder?: string;
  monthPlaceholder?: string;
  weekPlaceholder?: string;
  rangeYearPlaceholder?: [string, string];
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -19,6 +19,7 @@ There are five kinds of picker:
 - RangePicker
 - WeekPicker
 - YearPicker
+- QuarterPicker (Added in 4.1.0)

 ### Localization

@ -56,7 +57,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
 | locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time` \| `date` \| `month` \| `year` \| `decade` | - |  |
 | open | open state of picker | boolean | - |  |
-| picker | Set picker type | `date` \| `week` \| `month` \| `year` | `date` |  |
+| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` |  |
 | placeholder | placeholder of date input | string\|RangePicker\[] | - |  |
 | popupStyle | to customize the style of the popup calendar | object | {} |  |
 | size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
@ -102,6 +103,19 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
 | value | to set date | [moment](http://momentjs.com/) | - |  |
 | onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |

+### QuarterPicker
+
+Added in `4.1.0`.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | to set default date | [moment](http://momentjs.com/) | - |  |
+| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |  |
+| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" |  |
+| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |  |
+| value | to set date | [moment](http://momentjs.com/) | - |  |
+| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
+
 ### MonthPicker

 | Property | Description | Type | Default | Version |
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -20,6 +20,7 @@ subtitle: 日期选择框
 - RangePicker
 - WeekPicker
 - YearPicker
+- QuarterPicker (4.1.0 新增)

 ### 国际化配置

@ -58,7 +59,7 @@ import 'moment/locale/zh-cn';
 | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - |  |
 | open | 控制弹层是否展开 | boolean | - |  |
-| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `year` | `date` |  |
+| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` |  |
 | placeholder | 输入框提示文字 | string\|RangePicker\[] | - |  |
 | popupStyle | 额外的弹出日历样式 | object | {} |  |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | 无 |  |
@ -104,6 +105,19 @@ import 'moment/locale/zh-cn';
 | value | 日期 | [moment](http://momentjs.com/) | 无 |  |
 | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |

+### QuarterPicker
+
+`4.1.0` 新增。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |  |
+| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 |  |
+| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" |  |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
+| value | 日期 | [moment](http://momentjs.com/) | 无 |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
+
 ### MonthPicker

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
--- a/components/date-picker/locale/en_US.tsx
+++ b/components/date-picker/locale/en_US.tsx
@ -7,6 +7,7 @@ const locale: PickerLocale = {
  lang: {
    placeholder: 'Select date',
    yearPlaceholder: 'Select year',
+    quarterPlaceholder: 'Select quarter',
    monthPlaceholder: 'Select month',
    weekPlaceholder: 'Select week',
    rangePlaceholder: ['Start date', 'End date'],
--- a/components/date-picker/locale/zh_CN.tsx
+++ b/components/date-picker/locale/zh_CN.tsx
@ -7,6 +7,7 @@ const locale: PickerLocale = {
  lang: {
    placeholder: '请选择日期',
    yearPlaceholder: '请选择年份',
+    quarterPlaceholder: '请选择季度',
    monthPlaceholder: '请选择月份',
    weekPlaceholder: '请选择周',
    rangePlaceholder: ['开始日期', '结束日期'],
--- a/components/date-picker/style/panel.less
+++ b/components/date-picker/style/panel.less
@ -25,6 +25,7 @@
  // ========================================================
  &-decade-panel,
  &-year-panel,
+  &-quarter-panel,
  &-month-panel,
  &-week-panel,
  &-date-panel,
@ -419,6 +420,7 @@

  &-decade-panel,
  &-year-panel,
+  &-quarter-panel,
  &-month-panel {
    .@{picker-prefix-cls}-content {
      height: 265px;
@ -435,6 +437,12 @@
    }
  }

+  &-quarter-panel {
+    .@{picker-prefix-cls}-content {
+      height: 56px;
+    }
+  }
+
  // ======================== Footer ========================
  &-footer {
    line-height: @picker-text-height - 2 * @border-width-base;
@ -487,8 +495,9 @@
    }
  }

-  // ================== Year & Month Panel ==================
+  // ============= Year & Quarter & Month Panel =============
  &-year-panel,
+  &-quarter-panel,
  &-month-panel {
    @hover-cell-fixed-distance: (
        (@picker-panel-width - @padding-xs * 2) / 3 - @picker-year-month-cell-width
--- a/components/date-picker/util.ts
+++ b/components/date-picker/util.ts
@ -5,6 +5,9 @@ export function getPlaceholder(picker: PickerMode | undefined, locale: PickerLoc
  if (picker === 'year' && locale.lang.yearPlaceholder) {
    return locale.lang.yearPlaceholder;
  }
+  if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
+    return locale.lang.quarterPlaceholder;
+  }
  if (picker === 'month' && locale.lang.monthPlaceholder) {
    return locale.lang.monthPlaceholder;
  }
--- a/package.json
+++ b/package.json
@ -119,7 +119,7 @@
    "rc-menu": "~8.0.1",
    "rc-notification": "~4.0.0",
    "rc-pagination": "~2.0.1",
-    "rc-picker": "~1.3.0",
+    "rc-picker": "~1.4.0",
    "rc-progress": "~2.5.0",
    "rc-rate": "~2.5.1",
    "rc-resize-observer": "^0.1.0",