feat: timepicker add status & placement
tangjinzhou
parent
527dec6078
commit
bf1226d3bb
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue