github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: timepicker add status & placement

pull/5820/head
tangjinzhou 2022-05-21 22:23:52 +08:00
parent 527dec6078
commit bf1226d3bb
7 changed files with 151 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/date-picker/demo/status.vue
View File

@ -22,7 +22,7 @@ Add status to DatePicker with `status`, which could be `error` or `warning`.
<a-date-picker status="error" />
<a-date-picker status="warning" />
<a-range-picker status="error" />
<a-date-picker status="warning" />
<a-range-picker status="warning" />
</a-space>
</template>
<script lang="ts">

6
components/time-picker/demo/index.vue
View File

@ -10,6 +10,8 @@
<IntervalOptions />
<Size />
<Suffix />
<statusVue />
<placementVue />
</demo-sort>
</template>
@ -24,6 +26,8 @@ import Size from './size.vue';
import Suffix from './suffix.vue';
import Bordered from './bordered.vue';
import RangePicker from './range-picker.vue';
import placementVue from './placement.vue';
import statusVue from './status.vue';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@ -31,6 +35,8 @@ export default {
CN,
US,
components: {
placementVue,
statusVue,
Hours,
Addon,
Basic,

46
components/time-picker/demo/placement.vue Normal file
View File

@ -0,0 +1,46 @@
<docs>
---
order: 28
title:
zh-CN: 弹出位置
en-US: Popup Placement
---
## zh-CN
可以通过 `placement` 手动指定弹出的位置。
## en-US
You can manually specify the position of the popup via `placement`.
</docs>
<template>
<a-radio-group v-model:value="placement">
<a-radio-button value="topLeft">topLeft</a-radio-button>
<a-radio-button value="topRight">topRight</a-radio-button>
<a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
<a-radio-button value="bottomRight">bottomRight</a-radio-button>
</a-radio-group>
<br />
<br />
<a-space direction="vertical" :size="12">
<a-time-picker v-model:value="value1" :placement="placement" />
<a-time-range-picker v-model:value="value2" :placement="placement" />
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { Dayjs } from 'dayjs';
export default defineComponent({
setup() {
const placement = ref('topLeft' as const);
return {
placement,
value1: ref<Dayjs>(),
value2: ref<[Dayjs, Dayjs]>(),
};
},
});
</script>

35
components/time-picker/demo/status.vue Normal file
View File

@ -0,0 +1,35 @@
<docs>
---
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`.
</docs>
<template>
<a-space direction="vertical" style="width: 100%">
<a-time-picker status="error" />
<a-time-picker status="warning" />
<a-time-range-picker status="error" />
<a-time-range-picker status="warning" />
</a-space>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return {};
},
});
</script>

35
components/time-picker/index.en-US.md
View File

@ -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

36
components/time-picker/index.zh-CN.md
View File

@ -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

18
components/time-picker/time-picker.tsx
View File

@ -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<InputStatus>,
});
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<ExtractPropTypes<ReturnType<typeof timePickerProps>>>;
export type TimeRangePickerProps<DateType> = Omit<
RangePickerTimeProps<DateType>,
'picker' | 'defaultPickerValue' | 'defaultValue' | 'value' | 'onChange' | 'onPanelChange' | 'onOk'