feat: Quarter picker (#22468)

* support quarter picker

* update snapshot

* fix lint

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"
   >

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,

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];

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 |

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
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

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'],

components/date-picker/locale/zh_CN.tsx

@@ -7,6 +7,7 @@ const locale: PickerLocale = {
   lang: {
     placeholder: '请选择日期',
     yearPlaceholder: '请选择年份',
+    quarterPlaceholder: '请选择季度',
     monthPlaceholder: '请选择月份',
     weekPlaceholder: '请选择周',
     rangePlaceholder: ['开始日期', '结束日期'],

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

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;
   }

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",