feat: timepicker add status & placement

Author: tangjinzhou

components/date-picker/demo/status.vue

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

components/time-picker/demo/index.vue

@@ -10,6 +10,8 @@
     <IntervalOptions />
     <Size />
     <Suffix />
+    <statusVue />
+    <placementVue />
   </demo-sort>
 </template>
 
@@ -24,13 +26,17 @@ 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';
 
 export default {
   CN,
   US,
   components: {
+    placementVue,
+    statusVue,
     Hours,
     Addon,
     Basic,

components/time-picker/demo/placement.vue

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

components/time-picker/demo/status.vue

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

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
 

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
 

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