Skip to content

Commit bf1226d

Browse files
tangjinzhoutangjinzhou
committed
feat: timepicker add status & placement
1 parent 527dec6 commit bf1226d

File tree

7 files changed

+151
-27
lines changed

7 files changed

+151
-27
lines changed

‎components/date-picker/demo/status.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Add status to DatePicker with `status`, which could be `error` or `warning`.
2222
<a-date-picker status="error" />
2323
<a-date-picker status="warning" />
2424
<a-range-picker status="error" />
25-
<a-date-picker status="warning" />
25+
<a-range-picker status="warning" />
2626
</a-space>
2727
</template>
2828
<script lang="ts">

‎components/time-picker/demo/index.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<IntervalOptions />
1111
<Size />
1212
<Suffix />
13+
<statusVue />
14+
<placementVue />
1315
</demo-sort>
1416
</template>
1517

@@ -24,13 +26,17 @@ import Size from './size.vue';
2426
import Suffix from './suffix.vue';
2527
import Bordered from './bordered.vue';
2628
import RangePicker from './range-picker.vue';
29+
import placementVue from './placement.vue';
30+
import statusVue from './status.vue';
2731
import CN from '../index.zh-CN.md';
2832
import US from '../index.en-US.md';
2933
3034
export default {
3135
CN,
3236
US,
3337
components: {
38+
placementVue,
39+
statusVue,
3440
Hours,
3541
Addon,
3642
Basic,

‎components/time-picker/demo/placement.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<docs>
2+
---
3+
order: 28
4+
title:
5+
zh-CN: 弹出位置
6+
en-US: Popup Placement
7+
---
8+
9+
## zh-CN
10+
11+
可以通过 `placement` 手动指定弹出的位置。
12+
13+
## en-US
14+
15+
You can manually specify the position of the popup via `placement`.
16+
17+
</docs>
18+
19+
<template>
20+
<a-radio-group v-model:value="placement">
21+
<a-radio-button value="topLeft">topLeft</a-radio-button>
22+
<a-radio-button value="topRight">topRight</a-radio-button>
23+
<a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
24+
<a-radio-button value="bottomRight">bottomRight</a-radio-button>
25+
</a-radio-group>
26+
<br />
27+
<br />
28+
<a-space direction="vertical" :size="12">
29+
<a-time-picker v-model:value="value1" :placement="placement" />
30+
<a-time-range-picker v-model:value="value2" :placement="placement" />
31+
</a-space>
32+
</template>
33+
<script lang="ts">
34+
import { defineComponent, ref } from 'vue';
35+
import type { Dayjs } from 'dayjs';
36+
export default defineComponent({
37+
setup() {
38+
const placement = ref('topLeft' as const);
39+
return {
40+
placement,
41+
value1: ref<Dayjs>(),
42+
value2: ref<[Dayjs, Dayjs]>(),
43+
};
44+
},
45+
});
46+
</script>

‎components/time-picker/demo/status.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<docs>
2+
---
3+
order: 19
4+
version: 3.3.0
5+
title:
6+
zh-CN: 自定义状态
7+
en-US: Status
8+
---
9+
10+
## zh-CN
11+
12+
使用 `status` 为 DatePicker 添加状态，可选 `error` 或者 `warning`。
13+
14+
## en-US
15+
16+
Add status to DatePicker with `status`, which could be `error` or `warning`.
17+
18+
</docs>
19+
20+
<template>
21+
<a-space direction="vertical" style="width: 100%">
22+
<a-time-picker status="error" />
23+
<a-time-picker status="warning" />
24+
<a-time-range-picker status="error" />
25+
<a-time-range-picker status="warning" />
26+
</a-space>
27+
</template>
28+
<script lang="ts">
29+
import { defineComponent } from 'vue';
30+
export default defineComponent({
31+
setup() {
32+
return {};
33+
},
34+
});
35+
</script>

‎components/time-picker/index.en-US.md‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ By clicking the input box, you can select a time from a popup panel.
2121
| clearIcon | The custom clear icon | v-slot:clearIcon | - | |
2222
| clearText | The clear tooltip of icon | string | clear | |
2323
| disabled | Determine whether the TimePicker is disabled | boolean | false | |
24-
| disabledHours | To specify the hours that cannot be selected | function() | - | |
25-
| disabledMinutes | To specify the minutes that cannot be selected | function(selectedHour) | - | |
26-
| disabledSeconds | To specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | |
24+
| disabledTime | To specify the time that cannot be selected | [DisabledTime](#DisabledTime) | - | 3.3.0 |
2725
| format | To set the time format | string | `HH:mm:ss` | |
2826
| getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | |
2927
| 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.
3230
| minuteStep | Interval between minutes in picker | number | 1 | |
3331
| open(v-model) | Whether to popup panel | boolean | false | |
3432
| placeholder | Display when there's no value | string \| \[string, string] | `Select a time` | |
33+
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
3534
| popupClassName | The className of panel | string | - | |
3635
| popupStyle | The style of panel | CSSProperties | - | |
3736
| 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.
4241
| value(v-model) | To set time | [dayjs](https://day.js.org/) | - | |
4342
| 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) | - | |
4443

44+
#### DisabledTime
45+
46+
```typescript
47+
type DisabledTime = (now: Dayjs) => {
48+
disabledHours?: () => number[];
49+
disabledMinutes?: (selectedHour: number) => number[];
50+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
51+
};
52+
```
53+
4554
### events
4655

4756
| Events Name | Description | Arguments |
@@ -60,9 +69,23 @@ By clicking the input box, you can select a time from a popup panel.
6069

6170
Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props:
6271

63-
| Property | Description | Type | Default | Version |
64-
| -------- | ------------------------ | ------- | ------- | ------- |
65-
| order | Order start and end time | boolean | true | |
72+
| Property | Description | Type | Default | Version |
73+
| --- | --- | --- | --- | --- |
74+
| order | Order start and end time | boolean | true | |
75+
| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#RangeDisabledTime) | - | 3.3.0 |
76+
77+
#### RangeDisabledTime
78+
79+
```typescript
80+
type RangeDisabledTime = (
81+
now: Dayjs,
82+
type = 'start' | 'end',
83+
) => {
84+
disabledHours?: () => number[];
85+
disabledMinutes?: (selectedHour: number) => number[];
86+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
87+
};
88+
```
6689

6790
## FAQ
6891

‎components/time-picker/index.zh-CN.md‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
2222
| clearIcon | 自定义的清除图标 | v-slot:clearIcon | - | |
2323
| clearText | 清除按钮的提示文案 | string | clear | |
2424
| disabled | 禁用全部操作 | boolean | false | |
25-
| disabledHours | 禁止选择部分小时选项 | function() | - | |
26-
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - | |
27-
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - | |
25+
| disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | 3.3.0 |
2826
| format | 展示的时间格式 | string | `HH:mm:ss` | |
2927
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
3028
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
@@ -33,16 +31,28 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
3331
| minuteStep | 分钟选项间隔 | number | 1 | |
3432
| open(v-model) | 面板是否打开 | boolean | false | |
3533
| placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` | |
34+
| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
3635
| popupClassName | 弹出层类名 | string | - | |
3736
| popupStyle | 弹出层样式对象 | object | - | |
3837
| renderExtraFooter | 选择框底部显示自定义的内容 | v-slot:renderExtraFooter | - | |
3938
| secondStep | 秒选项间隔 | number | 1 | |
4039
| showNow | 面板是否显示“此刻”按钮 | boolean | - | |
40+
| status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 |
4141
| suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - | |
4242
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |
4343
| value(v-model) | 当前时间 | [dayjs](https://day.js.org/) | - | |
4444
| valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
4545

46+
#### DisabledTime
47+
48+
```typescript
49+
type DisabledTime = (now: Dayjs) => {
50+
disabledHours?: () => number[];
51+
disabledMinutes?: (selectedHour: number) => number[];
52+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
53+
};
54+
```
55+
4656
### 事件
4757

4858
| 事件名称 | 说明 | 回调参数 |
@@ -61,9 +71,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
6171

6272
属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
6373

64-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
65-
| ----- | -------------------- | ------- | ------ | ---- |
66-
| order | 始末时间是否自动排序 | boolean | true | |
74+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
75+
| ------------ | -------------------- | --------------------------------------- | ------ | ----- |
76+
| order | 始末时间是否自动排序 | boolean | true | |
77+
| disabledTime | 不可选择的时间 | [RangeDisabledTime](#RangeDisabledTime) | - | 3.3.0 |
78+
79+
#### RangeDisabledTime
80+
81+
```typescript
82+
type RangeDisabledTime = (
83+
now: Dayjs,
84+
type = 'start' | 'end',
85+
) => {
86+
disabledHours?: () => number[];
87+
disabledMinutes?: (selectedHour: number) => number[];
88+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
89+
};
90+
```
6791

6892
## FAQ
6993

‎components/time-picker/time-picker.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { ExtractPropTypes, PropType } from 'vue';
12
import { defineComponent, ref } from 'vue';
23
import type { RangePickerTimeProps } from '../date-picker/generatePicker';
34
import generatePicker from '../date-picker/generatePicker';
@@ -13,6 +14,7 @@ import type { RangePickerSharedProps } from '../vc-picker/RangePicker';
1314
import devWarning from '../vc-util/devWarning';
1415
import { useInjectFormItemContext } from '../form/FormItemContext';
1516
import omit from '../_util/omit';
17+
import type { InputStatus } from '../_util/statusUtils';
1618

1719
export interface TimePickerLocale {
1820
placeholder?: string;
@@ -31,21 +33,9 @@ export const timePickerProps = () => ({
3133
secondStep: Number,
3234
hideDisabledOptions: { type: Boolean, default: undefined },
3335
popupClassName: String,
36+
status: String as PropType<InputStatus>,
3437
});
35-
36-
export interface CommonTimePickerProps {
37-
format?: string;
38-
showNow?: boolean;
39-
showHour?: boolean;
40-
showMinute?: boolean;
41-
showSecond?: boolean;
42-
use12Hours?: boolean;
43-
hourStep?: number;
44-
minuteStep?: number;
45-
secondStep?: number;
46-
hideDisabledOptions?: boolean;
47-
popupClassName?: string;
48-
}
38+
type CommonTimePickerProps = Partial<ExtractPropTypes<ReturnType<typeof timePickerProps>>>;
4939
export type TimeRangePickerProps<DateType> = Omit<
5040
RangePickerTimeProps<DateType>,
5141
'picker' | 'defaultPickerValue' | 'defaultValue' | 'value' | 'onChange' | 'onPanelChange' | 'onOk'

0 commit comments

Comments
 (0)