From bf1226d3bb6ff89a75a1af93c240ccf6510a9d0c Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 21 May 2022 22:23:52 +0800 Subject: [PATCH] feat: timepicker add status & placement --- components/date-picker/demo/status.vue | 2 +- components/time-picker/demo/index.vue | 6 +++ components/time-picker/demo/placement.vue | 46 +++++++++++++++++++++++ components/time-picker/demo/status.vue | 35 +++++++++++++++++ components/time-picker/index.en-US.md | 35 ++++++++++++++--- components/time-picker/index.zh-CN.md | 36 +++++++++++++++--- components/time-picker/time-picker.tsx | 18 ++------- 7 files changed, 151 insertions(+), 27 deletions(-) create mode 100644 components/time-picker/demo/placement.vue create mode 100644 components/time-picker/demo/status.vue diff --git a/components/date-picker/demo/status.vue b/components/date-picker/demo/status.vue index 9e8e43265..c203090e0 100644 --- a/components/date-picker/demo/status.vue +++ b/components/date-picker/demo/status.vue @@ -22,7 +22,7 @@ Add status to DatePicker with `status`, which could be `error` or `warning`. - + diff --git a/components/time-picker/demo/status.vue b/components/time-picker/demo/status.vue new file mode 100644 index 000000000..9711edca2 --- /dev/null +++ b/components/time-picker/demo/status.vue @@ -0,0 +1,35 @@ + +--- +order: 19 +version: 3.3.0 +title: + zh-CN: 自定义状态 + en-US: Status +--- + +## zh-CN + +使用 `status` 为 DatePicker 添加状态，可选 `error` 或者 `warning`。 + +## en-US + +Add status to DatePicker with `status`, which could be `error` or `warning`. + + + + + diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index d75ab1a46..0cd4a0124 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -21,9 +21,7 @@ By clicking the input box, you can select a time from a popup panel. | clearIcon | The custom clear icon | v-slot:clearIcon | - | | | clearText | The clear tooltip of icon | string | clear | | | disabled | Determine whether the TimePicker is disabled | boolean | false | | -| disabledHours | To specify the hours that cannot be selected | function() | - | | -| disabledMinutes | To specify the minutes that cannot be selected | function(selectedHour) | - | | -| disabledSeconds | To specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | | +| disabledTime | To specify the time that cannot be selected | [DisabledTime](#DisabledTime) | - | 3.3.0 | | format | To set the time format | string | `HH:mm:ss` | | | getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | | | hideDisabledOptions | Whether hide the options that can not be selected | boolean | false | | @@ -32,6 +30,7 @@ By clicking the input box, you can select a time from a popup panel. | minuteStep | Interval between minutes in picker | number | 1 | | | open(v-model) | Whether to popup panel | boolean | false | | | placeholder | Display when there's no value | string \| \[string, string] | `Select a time` | | +| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | | popupClassName | The className of panel | string | - | | | popupStyle | The style of panel | CSSProperties | - | | | renderExtraFooter | Called from time picker panel to render some addon to its bottom | v-slot:renderExtraFooter | - | | @@ -42,6 +41,16 @@ By clicking the input box, you can select a time from a popup panel. | value(v-model) | To set time | [dayjs](https://day.js.org/) | - | | | valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | | +#### DisabledTime + +```typescript +type DisabledTime = (now: Dayjs) => { + disabledHours?: () => number[]; + disabledMinutes?: (selectedHour: number) => number[]; + disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; +}; +``` + ### events | Events Name | Description | Arguments | @@ -60,9 +69,23 @@ By clicking the input box, you can select a time from a popup panel. Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props: -| Property | Description | Type | Default | Version | -| -------- | ------------------------ | ------- | ------- | ------- | -| order | Order start and end time | boolean | true | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| order | Order start and end time | boolean | true | | +| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#RangeDisabledTime) | - | 3.3.0 | + +#### RangeDisabledTime + +```typescript +type RangeDisabledTime = ( + now: Dayjs, + type = 'start' | 'end', +) => { + disabledHours?: () => number[]; + disabledMinutes?: (selectedHour: number) => number[]; + disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; +}; +``` ## FAQ diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 9fa6c062b..dbf5b32b5 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -22,9 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg | clearIcon | 自定义的清除图标 | v-slot:clearIcon | - | | | clearText | 清除按钮的提示文案 | string | clear | | | disabled | 禁用全部操作 | boolean | false | | -| disabledHours | 禁止选择部分小时选项 | function() | - | | -| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - | | -| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - | | +| disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | 3.3.0 | | format | 展示的时间格式 | string | `HH:mm:ss` | | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | | @@ -33,16 +31,28 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg | minuteStep | 分钟选项间隔 | number | 1 | | | open(v-model) | 面板是否打开 | boolean | false | | | placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` | | +| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | | popupClassName | 弹出层类名 | string | - | | | popupStyle | 弹出层样式对象 | object | - | | | renderExtraFooter | 选择框底部显示自定义的内容 | v-slot:renderExtraFooter | - | | | secondStep | 秒选项间隔 | number | 1 | | | showNow | 面板是否显示“此刻”按钮 | boolean | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 | | suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - | | | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | | | value(v-model) | 当前时间 | [dayjs](https://day.js.org/) | - | | | valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | | +#### DisabledTime + +```typescript +type DisabledTime = (now: Dayjs) => { + disabledHours?: () => number[]; + disabledMinutes?: (selectedHour: number) => number[]; + disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; +}; +``` + ### 事件 | 事件名称 | 说明 | 回调参数 | @@ -61,9 +71,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性： -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----- | -------------------- | ------- | ------ | ---- | -| order | 始末时间是否自动排序 | boolean | true | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ------------ | -------------------- | --------------------------------------- | ------ | ----- | +| order | 始末时间是否自动排序 | boolean | true | | +| disabledTime | 不可选择的时间 | [RangeDisabledTime](#RangeDisabledTime) | - | 3.3.0 | + +#### RangeDisabledTime + +```typescript +type RangeDisabledTime = ( + now: Dayjs, + type = 'start' | 'end', +) => { + disabledHours?: () => number[]; + disabledMinutes?: (selectedHour: number) => number[]; + disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; +}; +``` ## FAQ diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx index 49015c84e..534cb0191 100644 --- a/components/time-picker/time-picker.tsx +++ b/components/time-picker/time-picker.tsx @@ -1,3 +1,4 @@ +import type { ExtractPropTypes, PropType } from 'vue'; import { defineComponent, ref } from 'vue'; import type { RangePickerTimeProps } from '../date-picker/generatePicker'; import generatePicker from '../date-picker/generatePicker'; @@ -13,6 +14,7 @@ import type { RangePickerSharedProps } from '../vc-picker/RangePicker'; import devWarning from '../vc-util/devWarning'; import { useInjectFormItemContext } from '../form/FormItemContext'; import omit from '../_util/omit'; +import type { InputStatus } from '../_util/statusUtils'; export interface TimePickerLocale { placeholder?: string; @@ -31,21 +33,9 @@ export const timePickerProps = () => ({ secondStep: Number, hideDisabledOptions: { type: Boolean, default: undefined }, popupClassName: String, + status: String as PropType, }); - -export interface CommonTimePickerProps { - format?: string; - showNow?: boolean; - showHour?: boolean; - showMinute?: boolean; - showSecond?: boolean; - use12Hours?: boolean; - hourStep?: number; - minuteStep?: number; - secondStep?: number; - hideDisabledOptions?: boolean; - popupClassName?: string; -} +type CommonTimePickerProps = Partial>>; export type TimeRangePickerProps = Omit< RangePickerTimeProps, 'picker' | 'defaultPickerValue' | 'defaultValue' | 'value' | 'onChange' | 'onPanelChange' | 'onOk'