feat(timepicker): add tips and status apis

src/time-picker/panel/single-panel.tsx

@@ -58,7 +58,6 @@ export default defineComponent({
       if (value.value) return dayjs(value.value, format.value);
 
       if (isStepsSet) return dayjs().hour(0).minute(0).second(0);
-
       return dayjs();
     });
 
@@ -68,7 +67,7 @@ export default defineComponent({
     watch(
       () => dayjsValue.value,
       () => {
-        if (dayjsValue.value) updateTimeScrollPos(true);
+        if (dayjsValue.value && value.value) updateTimeScrollPos(true);
       },
     );
 

src/time-picker/props.ts

@@ -45,20 +45,23 @@ export default {
   presets: {
     type: Object as PropType<TdTimePickerProps['presets']>,
   },
-  /** 尺寸 */
-  size: {
-    type: String as PropType<TdTimePickerProps['size']>,
-    default: 'medium' as TdTimePickerProps['size'],
-    validator(val: TdTimePickerProps['size']): boolean {
+  /** 输入框状态 */
+  status: {
+    type: String as PropType<TdTimePickerProps['status']>,
+    validator(val: TdTimePickerProps['status']): boolean {
       if (!val) return true;
-      return ['small', 'medium', 'large'].includes(val);
+      return ['default', 'success', 'warning', 'error'].includes(val);
     },
   },
   /** 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1'] */
   steps: {
     type: Array as PropType<TdTimePickerProps['steps']>,
     default: (): TdTimePickerProps['steps'] => [1, 1, 1],
   },
+  /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */
+  tips: {
+    type: [String, Function] as PropType<TdTimePickerProps['tips']>,
+  },
   /** 选中值 */
   value: {
     type: String,

src/time-picker/time-picker.tsx

@@ -139,6 +139,8 @@ export default defineComponent({
               value: this.isShowPanel ? this.currentValue : this.innerValue ?? undefined,
               inputValue: this.isShowPanel ? this.currentValue : this.innerValue ?? undefined,
               inputProps: this.inputProps,
+              status: this.status,
+              tips: this.tips,
               panel: () => (
                 <TimePickerPanel
                   {...{

src/time-picker/time-range-picker-props.ts

@@ -48,20 +48,23 @@ export default {
   rangeInputProps: {
     type: Object as PropType<TdTimeRangePickerProps['rangeInputProps']>,
   },
-  /** 尺寸 */
-  size: {
-    type: String as PropType<TdTimeRangePickerProps['size']>,
-    default: 'medium' as TdTimeRangePickerProps['size'],
-    validator(val: TdTimeRangePickerProps['size']): boolean {
+  /** 输入框状态 */
+  status: {
+    type: String as PropType<TdTimeRangePickerProps['status']>,
+    validator(val: TdTimeRangePickerProps['status']): boolean {
       if (!val) return true;
-      return ['small', 'medium', 'large'].includes(val);
+      return ['default', 'success', 'warning', 'error'].includes(val);
     },
   },
   /** 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1'] */
   steps: {
     type: Array as PropType<TdTimeRangePickerProps['steps']>,
     default: (): TdTimeRangePickerProps['steps'] => [1, 1, 1],
   },
+  /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */
+  tips: {
+    type: [String, Function] as PropType<TdTimeRangePickerProps['tips']>,
+  },
   /** 选中值 */
   value: {
     type: Array as PropType<TdTimeRangePickerProps['value']>,

src/time-picker/time-range-picker.tsx

@@ -172,6 +172,8 @@ export default defineComponent({
                 onVisibleChange: this.handleShowPopup,
                 ...this.popupProps,
               },
+              status: this.status,
+              tips: this.tips,
               rangeInputProps: {
                 size: this.size,
                 clearable: this.clearable,

src/time-picker/type.ts

@@ -7,6 +7,7 @@
 import { InputProps } from '../input';
 import { PopupProps } from '../popup';
 import { RangeInputProps } from '../range-input';
+import { TNode } from '../common';
 
 export interface TdTimePickerProps {
   /**
@@ -59,15 +60,18 @@ export interface TdTimePickerProps {
    */
   presets?: PresetTime;
   /**
-   * 尺寸
-   * @default medium
+   * 输入框状态
    */
-  size?: 'small' | 'medium' | 'large';
+  status?: 'default' | 'success' | 'warning' | 'error';
   /**
    * 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']
    * @default [1, 1, 1]
    */
   steps?: Array<string | number>;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: string | TNode;
   /**
    * 选中值
    * @default ''
@@ -160,15 +164,18 @@ export interface TdTimeRangePickerProps {
    */
   rangeInputProps?: RangeInputProps;
   /**
-   * 尺寸
-   * @default medium
+   * 输入框状态
    */
-  size?: 'small' | 'medium' | 'large';
+  status?: 'default' | 'success' | 'warning' | 'error';
   /**
    * 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']
    * @default [1, 1, 1]
    */
   steps?: Array<string | number>;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: string | TNode;
   /**
    * 选中值
    */