feat: datePicker add status & placement

Author: tangjinzhou

components/config-provider/context.ts

@@ -9,6 +9,9 @@ import type { Locale } from '../locale-provider';
 type GlobalFormCOntextProps = {
   validateMessages?: Ref<ValidateMessages>;
 };
+
+export type DirectionType = 'ltr' | 'rtl' | undefined;
+
 export const GlobalFormContextKey: InjectionKey<GlobalFormCOntextProps> =
   Symbol('GlobalFormContextKey');
 

components/config-provider/index.tsx

@@ -17,7 +17,14 @@ import type { ValidateMessages } from '../form/interface';
 import type { ConfigProviderProps, Theme } from './context';
 import { configProviderProps, useProvideGlobalForm } from './context';
 
-export type { ConfigProviderProps, Theme, SizeType, Direction, CSPConfig } from './context';
+export type {
+  ConfigProviderProps,
+  Theme,
+  SizeType,
+  Direction,
+  CSPConfig,
+  DirectionType,
+} from './context';
 export const defaultPrefixCls = 'ant';
 function getGlobalPrefixCls() {
   return globalConfigForApi.prefixCls || defaultPrefixCls;

components/date-picker/demo/index.vue

@@ -15,6 +15,8 @@
     <Mode />
     <Switchable />
     <Suffix />
+    <statusVue />
+    <placementVue />
   </demo-sort>
 </template>
 <script>
@@ -33,6 +35,8 @@ import Time from './time.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';
 import { defineComponent } from 'vue';
@@ -41,6 +45,8 @@ export default defineComponent({
   CN,
   US,
   components: {
+    statusVue,
+    placementVue,
     Basic,
     DateRender,
     DisabledDate,

components/date-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-date-picker v-model:value="value1" :placement="placement" />
+    <a-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/date-picker/demo/status.vue

@@ -0,0 +1,35 @@
+<docs>
+---
+order: 19
+version: 4.19.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-date-picker status="error" />
+    <a-date-picker status="warning" />
+    <a-range-picker status="error" />
+    <a-date-picker status="warning" />
+  </a-space>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -6,7 +6,7 @@ import { RangePicker as VCRangePicker } from '../../vc-picker';
 import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
-import { getRangePlaceholder } from '../util';
+import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { getTimeProps, Components } from '.';
 import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
@@ -16,8 +16,9 @@ import { commonProps, rangePickerProps } from './props';
 import type { PanelMode, RangeValue } from '../../vc-picker/interface';
 import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import devWarning from '../../vc-util/devWarning';
-import { useInjectFormItemContext } from '../../form/FormItemContext';
+import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
 import omit from '../../_util/omit';
+import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 
 export default function generateRangePicker<DateType, ExtraProps = {}>(
   generateConfig: GenerateConfig<DateType>,
@@ -46,6 +47,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
     setup(_props, { expose, slots, attrs, emit }) {
       const props = _props as unknown as CommonProps<DateType> & RangePickerProps<DateType>;
       const formItemContext = useInjectFormItemContext();
+      const formItemInputContext = FormItemInputContext.useInject();
       devWarning(
         !attrs.getCalendarContainer,
         'DatePicker',
@@ -166,6 +168,12 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
             : {}),
         };
         const pre = prefixCls.value;
+        const suffixNode = (
+          <>
+            {suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)}
+            {formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon}
+          </>
+        );
         return (
           <VCRangePicker
             dateRender={dateRender}
@@ -178,10 +186,9 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
               )
             }
             ref={pickerRef}
+            dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
             placeholder={getRangePlaceholder(picker, locale, placeholder as [string, string])}
-            suffixIcon={
-              suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
-            }
+            suffixIcon={suffixNode}
             clearIcon={clearIcon || <CloseCircleFilled />}
             allowClear={allowClear}
             transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
@@ -197,6 +204,11 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
                 [`${pre}-${size.value}`]: size.value,
                 [`${pre}-borderless`]: !bordered,
               },
+              getStatusClassNames(
+                pre,
+                getMergedStatus(formItemInputContext.status, props.status),
+                formItemInputContext.hasFeedback,
+              ),
               attrs.class,
             )}
             locale={locale!.lang}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -5,7 +5,7 @@ import RCPicker from '../../vc-picker';
 import type { PanelMode, PickerMode } from '../../vc-picker/interface';
 import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
-import { getPlaceholder } from '../util';
+import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import { getTimeProps, Components } from '.';
 import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
@@ -15,7 +15,8 @@ import type { CommonProps, DatePickerProps } from './props';
 import { commonProps, datePickerProps } from './props';
 
 import devWarning from '../../vc-util/devWarning';
-import { useInjectFormItemContext } from '../../form/FormItemContext';
+import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
+import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 
 export default function generateSinglePicker<DateType, ExtraProps = {}>(
   generateConfig: GenerateConfig<DateType>,
@@ -49,6 +50,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
           DatePickerProps<DateType> &
           ExtraProps;
         const formItemContext = useInjectFormItemContext();
+        const formItemInputContext = FormItemInputContext.useInject();
         devWarning(
           !(props.monthCellContentRender || slots.monthCellContentRender),
           'DatePicker',
@@ -185,17 +187,21 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
               : {}),
           };
           const pre = prefixCls.value;
+          const suffixNode = (
+            <>
+              {suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)}
+              {formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon}
+            </>
+          );
           return (
             <RCPicker
               monthCellRender={monthCellRender}
               dateRender={dateRender}
               renderExtraFooter={renderExtraFooter}
               ref={pickerRef}
               placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
-              suffixIcon={
-                suffixIcon ||
-                (mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
-              }
+              suffixIcon={suffixNode}
+              dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
               clearIcon={clearIcon || <CloseCircleFilled />}
               allowClear={allowClear}
               transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
@@ -213,6 +219,11 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
                   [`${pre}-${size.value}`]: size.value,
                   [`${pre}-borderless`]: !bordered,
                 },
+                getStatusClassNames(
+                  pre,
+                  getMergedStatus(formItemInputContext.status, props.status),
+                  formItemInputContext.hasFeedback,
+                ),
                 attrs.class,
               )}
               prefixCls={pre}

components/date-picker/generatePicker/index.tsx

@@ -17,13 +17,18 @@ function toArray<T>(list: T | T[]): T[] {
   return Array.isArray(list) ? list : [list];
 }
 
-export function getTimeProps<DateType>(
-  props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>,
+export function getTimeProps<DateType, DisabledTime>(
+  props: { format?: string; picker?: PickerMode } & Omit<
+    SharedTimeProps<DateType>,
+    'disabledTime'
+  > & {
+      disabledTime?: DisabledTime;
+    },
 ) {
   const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
 
   const firstFormat = toArray(format)[0];
-  const showTimeObj: SharedTimeProps<DateType> = { ...props };
+  const showTimeObj = { ...props };
 
   if (firstFormat && typeof firstFormat === 'string') {
     if (!firstFormat.includes('s') && showSecond === undefined) {

components/date-picker/generatePicker/props.ts

@@ -2,7 +2,6 @@ import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInte
 import type { CSSProperties, PropType } from 'vue';
 import type { PickerLocale } from '.';
 import type { SizeType } from '../../config-provider';
-import type { AlignType } from '../../vc-align/interface';
 import type {
   CustomFormat,
   DisabledTime,
@@ -17,12 +16,16 @@ import type { MonthCellRender } from '../../vc-picker/panels/MonthPanel/MonthBod
 import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
 import type { RangeDateRender, RangeInfo, RangeType } from '../../vc-picker/RangePicker';
 import type { VueNode } from '../../_util/type';
+import { tuple } from '../../_util/type';
+import type { InputStatus } from '../../_util/statusUtils';
+
+const DataPickerPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
+type DataPickerPlacement = typeof DataPickerPlacements[number];
 
 function commonProps<DateType = any>() {
   return {
     id: String,
     dropdownClassName: String,
-    dropdownAlign: { type: Object as PropType<AlignType> },
     popupStyle: { type: Object as PropType<CSSProperties> },
     transitionName: String,
     placeholder: String,
@@ -82,14 +85,15 @@ function commonProps<DateType = any>() {
     mode: { type: String as PropType<PanelMode> },
     picker: { type: String as PropType<PickerMode> },
     valueFormat: String,
+    placement: String as PropType<DataPickerPlacement>,
+    status: String as PropType<InputStatus>,
   };
 }
 
 export interface CommonProps<DateType> {
   id?: string;
   prefixCls?: string;
   dropdownClassName?: string;
-  dropdownAlign?: AlignType;
   popupStyle?: CSSProperties;
   transitionName?: string;
   placeholder?: string;
@@ -136,6 +140,8 @@ export interface CommonProps<DateType> {
   mode?: PanelMode;
   picker?: PickerMode;
   valueFormat?: string;
+  placement?: DataPickerPlacement;
+  status?: InputStatus;
 }
 
 function datePickerProps<DateType = any>() {

components/date-picker/index.en-US.md

@@ -92,9 +92,11 @@ The following APIs are shared by DatePicker, RangePicker.
 | open | The open state of picker | boolean | - |  |
 | picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter` |
 | placeholder | The placeholder of date input | string \| \[string,string] | - |  |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | 3.3.0 |
 | popupStyle | To customize the style of the popup calendar | CSSProperties | {} |  |
 | prevIcon | The custom prev icon | slot | - | 3.0 |
 | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
+| status | Set validation status | 'error' \| 'warning' | - | 3.3.0 |
 | suffixIcon | The custom suffix icon | v-slot:suffixIcon | - |  |
 | superNextIcon | The custom super next icon | slot | - | 3.0 |
 | superPrevIcon | The custom super prev icon | slot | - | 3.0 |