From a733885b50dd5e47c2c228912053b66b73fec507 Mon Sep 17 00:00:00 2001 From: Kermit Xuan Date: Tue, 22 Sep 2020 15:43:11 +0800 Subject: [PATCH] feat(date-picker): support custom format (#26845) * feat(upload): :sparkles: support custom format * test: update demo snapshot --- .../__tests__/__snapshots__/demo.test.js.snap | 69 +++++++++++++++++++ components/date-picker/demo/format.md | 5 ++ .../date-picker/generatePicker/index.tsx | 2 +- components/date-picker/index.en-US.md | 2 +- components/date-picker/index.zh-CN.md | 2 +- package.json | 2 +- 6 files changed, 78 insertions(+), 4 deletions(-) diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap index d586dcfe6d..9e2a09d1ee 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap @@ -2011,6 +2011,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
+
+
+
+ + + + + + + + + + + +
+
+
`; diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md index 84489a07ec..dbad230d84 100644 --- a/components/date-picker/demo/format.md +++ b/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( @@ -33,6 +37,7 @@ ReactDOM.render( defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]} format={dateFormat} /> + , mountNode, ); diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 0e97e3fe84..c0768780c4 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/components/date-picker/generatePicker/index.tsx @@ -36,7 +36,7 @@ export function getTimeProps( const firstFormat = toArray(format)[0]; const showTimeObj: SharedTimeProps = { ...props }; - if (firstFormat) { + if (firstFormat && typeof firstFormat === 'string') { if (!firstFormat.includes('s') && showSecond === undefined) { showTimeObj.showSecond = false; } diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 64f17e2803..bc5f6b0493 100644 --- a/components/date-picker/index.en-US.md +++ b/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() | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index aad5d41c72..8f6a50dfa4 100644 --- a/components/date-picker/index.zh-CN.md +++ b/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() | | diff --git a/package.json b/package.json index f621bfdddf..e676800798 100644 --- a/package.json +++ b/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", -- GitLab