doc: add faq about date-picker mode="year"

pull/1255/head
tanjinzhou 2019-10-09 19:03:53 +08:00
parent d2784465c2
commit 6b3de60163
4 changed files with 18 additions and 2 deletions

View File

@ -30,7 +30,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| locale | localization configuration | object | [default](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |
| mode | picker panel mode | `time|date|month|year` | 'date' |
| mode | picker panel mode[Cannot select year or month anymore?](/docs/vue/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time|date|month|year` | 'date' |
| open | open state of picker | boolean | - |
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
| popupStyle | to customize the style of the popup calendar | object | {} |

View File

@ -58,7 +58,7 @@
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 |
| disabledTime | 不可选择的时间 | function(date) | 无 |
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" |
| mode | 日期面板的状态 | `time|date|month|year` | 'date' |
| mode | 日期面板的状态[设置后无法选择年份/月份?](/docs/vue/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后,点击后无法选择年份/月份?) | `time|date|month|year` | 'date' |
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" slot-scope="mode" | - |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn/#API) |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |

View File

@ -41,3 +41,9 @@ Try `defaultValue` or `change` or `v-model` to change `value`.
Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
Or, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
### When I set `mode` to DatePicker/RangePicker, I cannot select year or month anymore?
In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now.
That is because `<DatePicker mode="year" />` do not equal to `YearPicker`, `<RangePicker mode="month" />` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190), which simply control the displayed panel and won't change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is).

View File

@ -43,3 +43,13 @@
### `ant-design-vue` 在移动端体验不佳。
`ant-design-vue` 并非针对移动端设计。
### 当我指定了 DatePicker/RangePicker 的 `mode` 属性后,点击后无法选择年份/月份?
在业务开发中,你可能有年份选择,月份范围选择,周范围选择等需求,此时你给现有组件增加了 `mode` 属性,却发现无法进行点击选择行为,面板也不会关闭。
这是因为 `<DatePicker mode="year" />` 不等于 `YearPicker``<RangePicker mode="month" />` 不等于 `MonthRangePicker``mode` 属性是在 antd 3.0 时,为了控制面板展现状态而添加的属性,以支持[展示时间面板](https://github.com/ant-design/ant-design/issues/5190)等需求而添加的。`mode` 只会简单的改变当前显示的面板,不会修改默认的交互行为(比如 DatePicker 依然是点击日才会完成选择并关闭面板)。
##### 解决办法
以下文章均是 react 版本的实现文章,思路一致。参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法,利用 `mode``panelChange` 等方法去封装一个 `YearPicker` 等组件。我们计划在 ant-design-vue@2.0 中直接添加更多相关日期组件来支持这些需求。