feat(date-picker): support custom format (#26845)

* feat(upload): ✨ support custom format

* test: update demo snapshot

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -2011,6 +2011,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
   </div>
   <div
     class="ant-space-item"
+    style="margin-bottom:12px"
   >
     <div
       class="ant-picker ant-picker-range"
@@ -2120,6 +2121,74 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
       </span>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select date"
+          readonly=""
+          size="27"
+          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>
+        <span
+          class="ant-picker-clear"
+        >
+          <span
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

components/date-picker/demo/format.md

@@ -24,6 +24,10 @@ const monthFormat = 'YYYY/MM';
 
 const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
 
+const customFormat = value => {
+  return `custom format: ${value.format(dateFormat)}`;
+};
+
 ReactDOM.render(
   <Space direction="vertical" size={12}>
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
@@ -33,6 +37,7 @@ ReactDOM.render(
       defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
       format={dateFormat}
     />
+    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat} />
   </Space>,
   mountNode,
 );

components/date-picker/generatePicker/index.tsx

@@ -36,7 +36,7 @@ export function getTimeProps<DateType>(
   const firstFormat = toArray(format)[0];
   const showTimeObj: SharedTimeProps<DateType> = { ...props };
 
-  if (firstFormat) {
+  if (firstFormat && typeof firstFormat === 'string') {
     if (!firstFormat.includes('s') && showSecond === undefined) {
       showTimeObj.showSecond = false;
     }

components/date-picker/index.en-US.md

@@ -89,7 +89,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD` |  |
+| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` |  |
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
 | showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |

components/date-picker/index.zh-CN.md

@@ -90,7 +90,7 @@ import locale from 'antd/es/locale/zh_CN';
 | defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
 | disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | `YYYY-MM-DD` |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |

package.json

@@ -132,7 +132,7 @@
     "rc-motion": "^2.0.0",
     "rc-notification": "~4.4.0",
     "rc-pagination": "~3.0.3",
-    "rc-picker": "~2.1.0",
+    "rc-picker": "~2.2.1",
     "rc-progress": "~3.1.0",
     "rc-rate": "~2.8.2",
     "rc-resize-observer": "^0.2.3",