feat: DatePicker support variant (#46568)

* feat: DatePicker support variant

* chore: update snapshot

* chore: update api table

* chore: update snapshot

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -12546,7 +12546,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
 exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = `
 <div>
   <div
-    class="config-picker"
+    class="config-picker config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -12590,7 +12590,7 @@ exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = `
 exports[`ConfigProvider components DatePicker DatePicker configProvider componentDisabled 1`] = `
 <div>
   <div
-    class="config-picker config-picker-disabled"
+    class="config-picker config-picker-outlined config-picker-disabled"
   >
     <div
       class="config-picker-input"
@@ -12635,7 +12635,7 @@ exports[`ConfigProvider components DatePicker DatePicker configProvider componen
 exports[`ConfigProvider components DatePicker DatePicker configProvider componentSize large 1`] = `
 <div>
   <div
-    class="config-picker config-picker-large"
+    class="config-picker config-picker-large config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -12679,7 +12679,7 @@ exports[`ConfigProvider components DatePicker DatePicker configProvider componen
 exports[`ConfigProvider components DatePicker DatePicker configProvider componentSize middle 1`] = `
 <div>
   <div
-    class="config-picker config-picker-middle"
+    class="config-picker config-picker-middle config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -12723,7 +12723,7 @@ exports[`ConfigProvider components DatePicker DatePicker configProvider componen
 exports[`ConfigProvider components DatePicker DatePicker configProvider componentSize small 1`] = `
 <div>
   <div
-    class="config-picker config-picker-small"
+    class="config-picker config-picker-small config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -12767,7 +12767,7 @@ exports[`ConfigProvider components DatePicker DatePicker configProvider componen
 exports[`ConfigProvider components DatePicker DatePicker normal 1`] = `
 <div>
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -12811,7 +12811,7 @@ exports[`ConfigProvider components DatePicker DatePicker normal 1`] = `
 exports[`ConfigProvider components DatePicker DatePicker prefixCls 1`] = `
 <div>
   <div
-    class="prefix-DatePicker"
+    class="prefix-DatePicker prefix-DatePicker-outlined"
   >
     <div
       class="prefix-DatePicker-input"
@@ -12855,7 +12855,7 @@ exports[`ConfigProvider components DatePicker DatePicker prefixCls 1`] = `
 exports[`ConfigProvider components DatePicker MonthPicker configProvider 1`] = `
 <div>
   <div
-    class="config-picker"
+    class="config-picker config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -12899,7 +12899,7 @@ exports[`ConfigProvider components DatePicker MonthPicker configProvider 1`] = `
 exports[`ConfigProvider components DatePicker MonthPicker configProvider componentDisabled 1`] = `
 <div>
   <div
-    class="config-picker config-picker-disabled"
+    class="config-picker config-picker-outlined config-picker-disabled"
   >
     <div
       class="config-picker-input"
@@ -12944,7 +12944,7 @@ exports[`ConfigProvider components DatePicker MonthPicker configProvider compone
 exports[`ConfigProvider components DatePicker MonthPicker configProvider componentSize large 1`] = `
 <div>
   <div
-    class="config-picker config-picker-large"
+    class="config-picker config-picker-large config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -12988,7 +12988,7 @@ exports[`ConfigProvider components DatePicker MonthPicker configProvider compone
 exports[`ConfigProvider components DatePicker MonthPicker configProvider componentSize middle 1`] = `
 <div>
   <div
-    class="config-picker config-picker-middle"
+    class="config-picker config-picker-middle config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -13032,7 +13032,7 @@ exports[`ConfigProvider components DatePicker MonthPicker configProvider compone
 exports[`ConfigProvider components DatePicker MonthPicker configProvider componentSize small 1`] = `
 <div>
   <div
-    class="config-picker config-picker-small"
+    class="config-picker config-picker-small config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -13076,7 +13076,7 @@ exports[`ConfigProvider components DatePicker MonthPicker configProvider compone
 exports[`ConfigProvider components DatePicker MonthPicker normal 1`] = `
 <div>
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -13120,7 +13120,7 @@ exports[`ConfigProvider components DatePicker MonthPicker normal 1`] = `
 exports[`ConfigProvider components DatePicker MonthPicker prefixCls 1`] = `
 <div>
   <div
-    class="prefix-MonthPicker"
+    class="prefix-MonthPicker prefix-MonthPicker-outlined"
   >
     <div
       class="prefix-MonthPicker-input"
@@ -13164,7 +13164,7 @@ exports[`ConfigProvider components DatePicker MonthPicker prefixCls 1`] = `
 exports[`ConfigProvider components DatePicker RangePicker configProvider 1`] = `
 <div>
   <div
-    class="config-picker config-picker-range"
+    class="config-picker config-picker-range config-picker-outlined"
   >
     <div
       class="config-picker-input config-picker-input-active"
@@ -13250,7 +13250,7 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider 1`] = `
 exports[`ConfigProvider components DatePicker RangePicker configProvider componentDisabled 1`] = `
 <div>
   <div
-    class="config-picker config-picker-range config-picker-disabled"
+    class="config-picker config-picker-range config-picker-outlined config-picker-disabled"
   >
     <div
       class="config-picker-input config-picker-input-active"
@@ -13338,7 +13338,7 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider compone
 exports[`ConfigProvider components DatePicker RangePicker configProvider componentSize large 1`] = `
 <div>
   <div
-    class="config-picker config-picker-range config-picker-large"
+    class="config-picker config-picker-range config-picker-large config-picker-outlined"
   >
     <div
       class="config-picker-input config-picker-input-active"
@@ -13424,7 +13424,7 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider compone
 exports[`ConfigProvider components DatePicker RangePicker configProvider componentSize middle 1`] = `
 <div>
   <div
-    class="config-picker config-picker-range config-picker-middle"
+    class="config-picker config-picker-range config-picker-middle config-picker-outlined"
   >
     <div
       class="config-picker-input config-picker-input-active"
@@ -13510,7 +13510,7 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider compone
 exports[`ConfigProvider components DatePicker RangePicker configProvider componentSize small 1`] = `
 <div>
   <div
-    class="config-picker config-picker-range config-picker-small"
+    class="config-picker config-picker-range config-picker-small config-picker-outlined"
   >
     <div
       class="config-picker-input config-picker-input-active"
@@ -13596,7 +13596,7 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider compone
 exports[`ConfigProvider components DatePicker RangePicker normal 1`] = `
 <div>
   <div
-    class="ant-picker ant-picker-range"
+    class="ant-picker ant-picker-range ant-picker-outlined"
   >
     <div
       class="ant-picker-input ant-picker-input-active"
@@ -13682,7 +13682,7 @@ exports[`ConfigProvider components DatePicker RangePicker normal 1`] = `
 exports[`ConfigProvider components DatePicker RangePicker prefixCls 1`] = `
 <div>
   <div
-    class="prefix-RangePicker prefix-RangePicker-range"
+    class="prefix-RangePicker prefix-RangePicker-range prefix-RangePicker-outlined"
   >
     <div
       class="prefix-RangePicker-input prefix-RangePicker-input-active"
@@ -13768,7 +13768,7 @@ exports[`ConfigProvider components DatePicker RangePicker prefixCls 1`] = `
 exports[`ConfigProvider components DatePicker WeekPicker configProvider 1`] = `
 <div>
   <div
-    class="config-picker"
+    class="config-picker config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -13812,7 +13812,7 @@ exports[`ConfigProvider components DatePicker WeekPicker configProvider 1`] = `
 exports[`ConfigProvider components DatePicker WeekPicker configProvider componentDisabled 1`] = `
 <div>
   <div
-    class="config-picker config-picker-disabled"
+    class="config-picker config-picker-outlined config-picker-disabled"
   >
     <div
       class="config-picker-input"
@@ -13857,7 +13857,7 @@ exports[`ConfigProvider components DatePicker WeekPicker configProvider componen
 exports[`ConfigProvider components DatePicker WeekPicker configProvider componentSize large 1`] = `
 <div>
   <div
-    class="config-picker config-picker-large"
+    class="config-picker config-picker-large config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -13901,7 +13901,7 @@ exports[`ConfigProvider components DatePicker WeekPicker configProvider componen
 exports[`ConfigProvider components DatePicker WeekPicker configProvider componentSize middle 1`] = `
 <div>
   <div
-    class="config-picker config-picker-middle"
+    class="config-picker config-picker-middle config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -13945,7 +13945,7 @@ exports[`ConfigProvider components DatePicker WeekPicker configProvider componen
 exports[`ConfigProvider components DatePicker WeekPicker configProvider componentSize small 1`] = `
 <div>
   <div
-    class="config-picker config-picker-small"
+    class="config-picker config-picker-small config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -13989,7 +13989,7 @@ exports[`ConfigProvider components DatePicker WeekPicker configProvider componen
 exports[`ConfigProvider components DatePicker WeekPicker normal 1`] = `
 <div>
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -14033,7 +14033,7 @@ exports[`ConfigProvider components DatePicker WeekPicker normal 1`] = `
 exports[`ConfigProvider components DatePicker WeekPicker prefixCls 1`] = `
 <div>
   <div
-    class="prefix-WeekPicker"
+    class="prefix-WeekPicker prefix-WeekPicker-outlined"
   >
     <div
       class="prefix-WeekPicker-input"
@@ -29346,7 +29346,7 @@ exports[`ConfigProvider components Tags prefixCls 1`] = `
 exports[`ConfigProvider components TimePicker configProvider 1`] = `
 Array [
   <div
-    class="config-picker"
+    class="config-picker config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -30759,7 +30759,7 @@ Array [
 exports[`ConfigProvider components TimePicker configProvider componentDisabled 1`] = `
 Array [
   <div
-    class="config-picker config-picker-disabled"
+    class="config-picker config-picker-outlined config-picker-disabled"
   >
     <div
       class="config-picker-input"
@@ -30807,7 +30807,7 @@ Array [
 exports[`ConfigProvider components TimePicker configProvider componentSize large 1`] = `
 Array [
   <div
-    class="config-picker config-picker-large"
+    class="config-picker config-picker-large config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -32220,7 +32220,7 @@ Array [
 exports[`ConfigProvider components TimePicker configProvider componentSize middle 1`] = `
 Array [
   <div
-    class="config-picker config-picker-middle"
+    class="config-picker config-picker-middle config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -33633,7 +33633,7 @@ Array [
 exports[`ConfigProvider components TimePicker configProvider componentSize small 1`] = `
 Array [
   <div
-    class="config-picker config-picker-small"
+    class="config-picker config-picker-small config-picker-outlined"
   >
     <div
       class="config-picker-input"
@@ -35046,7 +35046,7 @@ Array [
 exports[`ConfigProvider components TimePicker normal 1`] = `
 Array [
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -36459,7 +36459,7 @@ Array [
 exports[`ConfigProvider components TimePicker prefixCls 1`] = `
 Array [
   <div
-    class="prefix-TimePicker"
+    class="prefix-TimePicker prefix-TimePicker-outlined"
   >
     <div
       class="prefix-TimePicker-input"

components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`DatePicker disabled date 1`] = `
 Array [
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -604,7 +604,7 @@ Array [
 exports[`DatePicker prop locale should works 1`] = `
 Array [
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -1228,7 +1228,7 @@ Array [
 
 exports[`DatePicker support DatePicker.generatePicker 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"

components/date-picker/__tests__/__snapshots__/QuarterPicker.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`QuarterPicker should support style prop 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
   style="width: 400px;"
 >
   <div

components/date-picker/__tests__/__snapshots__/RangePicker.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`RangePicker customize separator 1`] = `
 <div
-  class="ant-picker ant-picker-range"
+  class="ant-picker ant-picker-range ant-picker-outlined"
 >
   <div
     class="ant-picker-input ant-picker-input-active"
@@ -64,7 +64,7 @@ exports[`RangePicker customize separator 1`] = `
 exports[`RangePicker ranges RangePicker support preset ranges with Tags 1`] = `
 Array [
   <div
-    class="ant-picker ant-picker-range"
+    class="ant-picker ant-picker-range ant-picker-outlined"
   >
     <div
       class="ant-picker-input ant-picker-input-active"

components/date-picker/__tests__/__snapshots__/WeekPicker.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`WeekPicker should support style prop 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
   style="width: 400px;"
 >
   <div

components/date-picker/__tests__/__snapshots__/mount.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`mount rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-picker ant-picker-rtl"
+  class="ant-picker ant-picker-outlined ant-picker-rtl"
 >
   <div
     class="ant-picker-input"
@@ -44,7 +44,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
 
 exports[`mount rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
-  class="ant-picker ant-picker-rtl"
+  class="ant-picker ant-picker-outlined ant-picker-rtl"
 >
   <div
     class="ant-picker-input"
@@ -86,7 +86,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
 
 exports[`mount rtl render component should be rendered correctly in RTL direction 3`] = `
 <div
-  class="ant-picker ant-picker-rtl"
+  class="ant-picker ant-picker-outlined ant-picker-rtl"
 >
   <div
     class="ant-picker-input"
@@ -128,7 +128,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
 
 exports[`mount rtl render component should be rendered correctly in RTL direction 4`] = `
 <div
-  class="ant-picker ant-picker-range ant-picker-rtl"
+  class="ant-picker ant-picker-range ant-picker-outlined ant-picker-rtl"
 >
   <div
     class="ant-picker-input ant-picker-input-active"

components/date-picker/__tests__/__snapshots__/other.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
 <div>
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -264,7 +264,7 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
 exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
 <div>
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -948,7 +948,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
 
 exports[`Picker format by locale date 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -1015,7 +1015,7 @@ exports[`Picker format by locale date 1`] = `
 
 exports[`Picker format by locale dateTime 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -1082,7 +1082,7 @@ exports[`Picker format by locale dateTime 1`] = `
 
 exports[`Picker format by locale month 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -1149,7 +1149,7 @@ exports[`Picker format by locale month 1`] = `
 
 exports[`Picker format by locale week 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"

components/date-picker/demo/bordered.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { DatePicker, Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-const App: React.FC = () => (
-  <Space direction="vertical" size={12}>
-    <DatePicker bordered={false} />
-    <DatePicker picker="week" bordered={false} />
-    <DatePicker picker="month" bordered={false} />
-    <DatePicker picker="year" bordered={false} />
-    <RangePicker bordered={false} />
-    <RangePicker picker="week" bordered={false} />
-    <RangePicker picker="month" bordered={false} />
-    <RangePicker picker="year" bordered={false} />
-  </Space>
-);
-
-export default App;

components/date-picker/demo/filled-debug.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Filled Debug
+
+## en-US
+
+Filled Debug

components/date-picker/demo/filled-debug.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { DatePicker, Space } from 'antd';
+
+dayjs.extend(customParseFormat);
+
+const { RangePicker } = DatePicker;
+
+const dateFormat = 'YYYY-MM-DD';
+
+const App: React.FC = () => (
+  <Space direction="vertical" size={12}>
+    <DatePicker variant="filled" defaultValue={dayjs('2015-06-06', dateFormat)} disabled />
+    <DatePicker
+      variant="filled"
+      picker="month"
+      defaultValue={dayjs('2015-06', 'YYYY-MM')}
+      disabled
+    />
+    <RangePicker
+      variant="filled"
+      defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}
+      disabled
+    />
+    <RangePicker
+      variant="filled"
+      defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}
+      disabled={[false, true]}
+    />
+    <DatePicker
+      defaultValue={dayjs('2023-12-25')}
+      variant="filled"
+      status="error"
+      style={{ width: '100%' }}
+    />
+    <DatePicker variant="filled" status="warning" style={{ width: '100%' }} />
+    <RangePicker variant="filled" status="error" style={{ width: '100%' }} />
+    <RangePicker variant="filled" status="warning" style={{ width: '100%' }} />
+  </Space>
+);
+
+export default App;

components/date-picker/demo/variant.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+可选 `outlined` `filled` `borderless` 三种形态。
+
+## en-US
+
+There are `outlined` `fille` and `borderless`, totally three variants to choose from.

components/date-picker/demo/variant.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DatePicker, Flex } from 'antd';
+
+const { RangePicker } = DatePicker;
+
+const App: React.FC = () => (
+  <Flex vertical gap={12}>
+    <Flex gap={8}>
+      <DatePicker placeholder="Outlined" />
+      <RangePicker placeholder={['Outlined', '']} />
+    </Flex>
+    <Flex gap={8}>
+      <DatePicker placeholder="Filled" variant="filled" />
+      <RangePicker placeholder={['Filled', '']} variant="filled" />
+    </Flex>
+    <Flex gap={8}>
+      <DatePicker placeholder="Borderless" variant="borderless" />
+      <RangePicker placeholder={['Borderless', '']} variant="borderless" />
+    </Flex>
+  </Flex>
+);
+
+export default App;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -29,6 +29,8 @@ import Components from './Components';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
 import { useZIndex } from '../../_util/hooks/useZIndex';
 import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
+import useVariant from '../../_util/hooks/useVariants';
+import { InputVariants } from '../../input/Input';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type InternalRangePickerProps = RangePickerProps<DateType> & {};
@@ -62,6 +64,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       clearIcon,
       allowClear,
       rootClassName,
+      variant: customVariant,
       ...restProps
     } = props;
 
@@ -72,6 +75,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     const { format, showTime, picker } = props as any;
     const rootPrefixCls = getPrefixCls();
 
+    const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants);
+
     const rootCls = useCSSVarCls(prefixCls);
     const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
@@ -85,6 +90,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       const warning = devUseWarning('DatePicker.RangePicker');
 
       warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName');
+
+      warning.deprecated(!('bordered' in props), 'bordered', 'variant');
     }
 
     // ===================== Size =====================
@@ -139,7 +146,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         className={classNames(
           {
             [`${prefixCls}-${mergedSize}`]: mergedSize,
-            [`${prefixCls}-borderless`]: !bordered,
+            [`${prefixCls}-${variant}`]: enableVariantCls,
           },
           getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback),
           hashId,

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -30,6 +30,8 @@ import Components from './Components';
 import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
 import { useZIndex } from '../../_util/hooks/useZIndex';
 import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
+import useVariant from '../../_util/hooks/useVariants';
+import { InputVariants } from '../../input/Input';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type CustomPickerProps = {
@@ -55,7 +57,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           className,
           rootClassName,
           size: customizeSize,
-          bordered = true,
+          bordered,
           placement,
           placeholder,
           popupClassName,
@@ -64,6 +66,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           status: customStatus,
           clearIcon,
           allowClear,
+          variant: customVariant,
           ...restProps
         } = props;
 
@@ -80,6 +83,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const innerRef = React.useRef<RCPicker<DateType>>(null);
         const { format, showTime } = props as any;
 
+        const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants);
+
         const rootCls = useCSSVarCls(prefixCls);
         const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
@@ -118,6 +123,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           );
 
           warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName');
+
+          warning.deprecated(!('bordered' in props), 'bordered', 'variant');
         }
 
         // ===================== Size =====================
@@ -162,7 +169,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
             className={classNames(
               {
                 [`${prefixCls}-${mergedSize}`]: mergedSize,
-                [`${prefixCls}-borderless`]: !bordered,
+                [`${prefixCls}-${variant}`]: enableVariantCls,
               },
               getStatusClassNames(
                 prefixCls,
@@ -187,6 +194,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
             dropdownClassName={classNames(
               hashId,
               cssVarCls,
+              rootCls,
               rootClassName,
               popupClassName || dropdownClassName,
             )}

components/date-picker/generatePicker/index.tsx

@@ -15,9 +15,10 @@ import type { SizeType } from '../../config-provider/SizeContext';
 import type { TimePickerLocale } from '../../time-picker';
 import generateRangePicker from './generateRangePicker';
 import generateSinglePicker from './generateSinglePicker';
+import type { InputVariant } from '../../input/Input';
 
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
-type DataPickerPlacement = typeof DataPickerPlacements[number];
+type DataPickerPlacement = (typeof DataPickerPlacements)[number];
 
 type InjectDefaultProps<Props> = Omit<
   Props,
@@ -26,8 +27,14 @@ type InjectDefaultProps<Props> = Omit<
   locale?: PickerLocale;
   size?: SizeType;
   placement?: DataPickerPlacement;
+  /** @deprecated Use `variant` instead */
   bordered?: boolean;
   status?: InputStatus;
+  /**
+   * @since 5.13.0
+   * @default "outlined"
+   */
+  variant?: InputVariant;
 };
 
 export type PickerLocale = {

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

@@ -29,7 +29,8 @@ By clicking the input box, you can select a date from a popup calendar.
 <code src="./demo/size.tsx">Three Sizes</code>
 <code src="./demo/cell-render.tsx">Customized Cell Rendering</code>
 <code src="./demo/status.tsx">Status</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
+<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
+<code src="./demo/filled-debug.tsx" debug>Filled Debug</code>
 <code src="./demo/placement.tsx">Placement</code>
 <code src="./demo/mode.tsx" debug>Controlled Panels</code>
 <code src="./demo/start-end.tsx" debug>Customized Range Picker</code>
@@ -89,7 +90,6 @@ The following APIs are shared by DatePicker, RangePicker.
 | --- | --- | --- | --- | --- |
 | allowClear | Customize clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type |
 | autoFocus | If get focus when component mounted | boolean | false |  |
-| bordered | Whether has border style | boolean | true |  |
 | className | The picker className | string | - |  |
 | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
 | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
@@ -117,6 +117,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
 | superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 |
 | superPrevIcon | The custom super prev icon | ReactNode | - | 4.17.0 |
+| variant | Variants of picker | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
 | onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - |  |
 | onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - |  |
 

components/date-picker/index.zh-CN.md

@@ -30,7 +30,8 @@ demo:
 <code src="./demo/size.tsx">三种大小</code>
 <code src="./demo/cell-render.tsx">定制单元格</code>
 <code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/bordered.tsx">无边框</code>
+<code src="./demo/variant.tsx" version="5.13.0">多种形态</code>
+<code src="./demo/filled-debug.tsx" debug>Filled Debug</code>
 <code src="./demo/placement.tsx">弹出位置</code>
 <code src="./demo/mode.tsx" debug>受控面板</code>
 <code src="./demo/start-end.tsx" debug>自定义日期范围选择</code>
@@ -90,7 +91,6 @@ import 'dayjs/locale/zh-cn';
 | --- | --- | --- | --- | --- |
 | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
 | autoFocus | 自动获取焦点 | boolean | false |  |
-| bordered | 是否有边框 | boolean | true |  |
 | className | 选择器 className | string | - |  |
 | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
 | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
@@ -118,6 +118,7 @@ import 'dayjs/locale/zh-cn';
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | superNextIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 |
 | superPrevIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 |
+| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
 | onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - |  |
 | onPanelChange | 日历面板切换的回调 | function(value, mode) | - |  |
 

components/date-picker/style/index.ts

@@ -1,15 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-
+import { genPlaceholderStyle, initInputToken } from '../../input/style';
-import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
-import {
-  genActiveStyle,
-  genBasicInputStyle,
-  initComponentToken,
-  initInputToken,
-} from '../../input/style';
-import { genHoverStyle } from '../../input/style/variants';
 import { resetComponent, textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import {
@@ -20,115 +12,23 @@ import {
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
-import type { GlobalToken } from '../../theme/interface';
+import type { GenerateStyle } from '../../theme/internal';
-import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
-import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+import { genRoundedArrow } from '../../style/roundedArrow';
-import type { ArrowToken } from '../../style/roundedArrow';
+import type {
-import { genRoundedArrow, getArrowToken } from '../../style/roundedArrow';
+  ComponentToken,
+  PanelComponentToken,
+  PickerPanelToken,
+  PickerToken,
+  SharedPickerToken,
+} from './token';
+import { initPanelComponentToken, initPickerPanelToken, prepareComponentToken } from './token';
+import genVariantsStyle from './variants';
 
-export interface PanelComponentToken {
+export type { ComponentToken, PanelComponentToken, PickerPanelToken };
-  /**
+export { initPickerPanelToken, initPanelComponentToken };
-   * @desc 单元格悬浮态背景色
-   * @descEN Background color of cell hover state
-   */
-  cellHoverBg: string;
-  /**
-   * @desc 选取范围内的单元格背景色
-   * @descEN Background color of cell in range
-   */
-  cellActiveWithRangeBg: string;
-  /**
-   * @desc 选取范围内的单元格悬浮态背景色
-   * @descEN Background color of hovered cell in range
-   */
-  cellHoverWithRangeBg: string;
-  /**
-   * @desc 单元格禁用态背景色
-   * @descEN Background color of disabled cell
-   */
-  cellBgDisabled: string;
-  /**
-   * @desc 选取范围时单元格边框色
-   * @descEN Border color of cell in range when picking
-   */
-  cellRangeBorderColor: string;
-  /**
-   * @desc 时间列宽度
-   * @descEN Width of time column
-   */
-  timeColumnWidth: number;
-  /**
-   * @desc 时间列高度
-   * @descEN Height of time column
-   */
-  timeColumnHeight: number;
-  /**
-   * @desc 时间单元格高度
-   * @descEN Height of time cell
-   */
-  timeCellHeight: number;
-  /**
-   * @desc 单元格高度
-   * @descEN Height of cell
-   */
-  cellHeight: number;
-  /**
-   * @desc 单元格宽度
-   * @descEN Width of cell
-   */
-  cellWidth: number;
-  /**
-   * @desc 单元格文本高度
-   * @descEN Height of cell text
-   */
-  textHeight: number;
-  /**
-   * @desc 十年/年/季/月/周单元格高度
-   * @descEN Height of decade/year/quarter/month/week cell
-   */
-  withoutTimeCellHeight: number;
-}
 
-export interface ComponentToken
+const genPickerPadding = (
-  extends Exclude<SharedComponentToken, 'addonBg'>,
-    PanelComponentToken,
-    ArrowToken {
-  /**
-   * @desc 预设区域宽度
-   * @descEN Width of preset area
-   */
-  presetsWidth: number;
-  /**
-   * @desc 预设区域最大宽度
-   * @descEN Max width of preset area
-   */
-  presetsMaxWidth: number;
-  /**
-   * @desc 弹窗 z-index
-   * @descEN z-index of popup
-   */
-  zIndexPopup: number;
-}
-
-export type PickerPanelToken = {
-  pickerCellCls: string;
-  pickerCellInnerCls: string;
-  pickerDatePanelPaddingHorizontal: number | string;
-  pickerYearMonthCellWidth: number | string;
-  pickerCellPaddingVertical: number | string;
-  pickerQuarterPanelContentHeight: number | string;
-  pickerCellBorderGap: number;
-  pickerControlIconSize: number;
-  pickerControlIconMargin: number;
-  pickerControlIconBorderWidth: number;
-};
-
-type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken;
-
-type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken & PanelComponentToken;
-
-const genPikerPadding = (
   token: PickerToken,
   inputHeight: number,
   fontHeight: number,
@@ -1025,58 +925,17 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
 };
 
 const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
-  const {
+  const { componentCls, colorError, colorWarning } = token;
-    componentCls,
-    colorBgContainer,
-    colorError,
-    errorActiveShadow,
-    colorWarning,
-    warningActiveShadow,
-    colorErrorHover,
-    colorWarningHover,
-  } = token;
 
   return {
     [`${componentCls}:not(${componentCls}-disabled):not([disabled])`]: {
       [`&${componentCls}-status-error`]: {
-        backgroundColor: colorBgContainer,
-        borderColor: colorError,
-
-        '&:hover': {
-          borderColor: colorErrorHover,
-        },
-
-        [`&${componentCls}-focused, &:focus`]: {
-          ...genActiveStyle(
-            mergeToken<PickerToken>(token, {
-              activeBorderColor: colorError,
-              activeShadow: errorActiveShadow,
-            }),
-          ),
-        },
-
         [`${componentCls}-active-bar`]: {
           background: colorError,
         },
       },
 
       [`&${componentCls}-status-warning`]: {
-        backgroundColor: colorBgContainer,
-        borderColor: colorWarning,
-
-        '&:hover': {
-          borderColor: colorWarningHover,
-        },
-
-        [`&${componentCls}-focused, &:focus`]: {
-          ...genActiveStyle(
-            mergeToken<PickerToken>(token, {
-              activeBorderColor: colorWarning,
-              activeShadow: warningActiveShadow,
-            }),
-          ),
-        },
-
         [`${componentCls}-active-bar`]: {
           background: colorWarning,
         },
@@ -1091,13 +950,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     antCls,
     controlHeight,
     paddingInline,
-    colorBgContainer,
     lineWidth,
     lineType,
     colorBorder,
     borderRadius,
     motionDurationMid,
-    colorBgContainerDisabled,
     colorTextDisabled,
     colorTextPlaceholder,
     controlHeightLG,
@@ -1126,7 +983,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     presetsWidth,
     presetsMaxWidth,
     boxShadowPopoverArrow,
-    colorTextQuaternary,
     fontHeight,
     fontHeightLG,
     lineHeightLG,
@@ -1136,39 +992,13 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     {
       [componentCls]: {
         ...resetComponent(token),
-        ...genPikerPadding(token, controlHeight, fontHeight, paddingInline),
+        ...genPickerPadding(token, controlHeight, fontHeight, paddingInline),
         position: 'relative',
         display: 'inline-flex',
         alignItems: 'center',
-        background: colorBgContainer,
         lineHeight: 1,
-        border: `${unit(lineWidth)} ${lineType} ${colorBorder}`,
         borderRadius,
-        transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
+        transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`,
-
-        '&:hover': {
-          ...genHoverStyle(token),
-        },
-
-        [`&-focused${componentCls}`]: {
-          ...genActiveStyle(token),
-        },
-
-        [`&${componentCls}-disabled`]: {
-          background: colorBgContainerDisabled,
-          borderColor: colorBorder,
-          cursor: 'not-allowed',
-
-          [`${componentCls}-suffix`]: {
-            color: colorTextQuaternary,
-          },
-        },
-
-        [`&${componentCls}-borderless`]: {
-          backgroundColor: 'transparent !important',
-          borderColor: 'transparent !important',
-          boxShadow: 'none !important',
-        },
 
         // ======================== Input =========================
         [`${componentCls}-input`]: {
@@ -1178,7 +1008,14 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           width: '100%',
 
           '> input': {
-            ...genBasicInputStyle(token),
+            position: 'relative',
+            display: 'inline-block',
+            width: '100%',
+            color: 'inherit',
+            fontSize: token.fontSize,
+            lineHeight: token.lineHeight,
+            transition: `all ${motionDurationMid}`,
+            ...genPlaceholderStyle(colorTextPlaceholder),
             flex: 'auto',
 
             // Fix Firefox flex not correct:
@@ -1188,15 +1025,17 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
             padding: 0,
             background: 'transparent',
             border: 0,
-            borderRadius: 0,
             fontFamily: 'inherit',
 
             '&:focus': {
               boxShadow: 'none',
+              outline: 0,
             },
 
             '&[disabled]': {
               background: 'transparent',
+              color: colorTextDisabled,
+              cursor: 'not-allowed',
             },
           },
 
@@ -1204,6 +1043,12 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
             [`${componentCls}-clear`]: {
               opacity: 1,
             },
+            // Should use the following selector, but since `:has` has poor compatibility,
+            // we use `:not(:last-child)` instead, which may cause some problems in some cases.
+            // [`${componentCls}-suffix:has(+ ${componentCls}-clear)`]: {
+            [`${componentCls}-suffix:not(:last-child)`]: {
+              opacity: 0,
+            },
           },
 
           '&-placeholder': {
@@ -1215,7 +1060,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
 
         // Size
         '&-large': {
-          ...genPikerPadding(token, controlHeightLG, fontHeightLG, paddingInline),
+          ...genPickerPadding(token, controlHeightLG, fontHeightLG, paddingInline),
 
           [`${componentCls}-input > input`]: {
             fontSize: fontSizeLG,
@@ -1224,7 +1069,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         },
 
         '&-small': {
-          ...genPikerPadding(token, controlHeightSM, fontHeight, paddingInlineSM),
+          ...genPickerPadding(token, controlHeightSM, fontHeight, paddingInlineSM),
         },
 
         [`${componentCls}-suffix`]: {
@@ -1235,6 +1080,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           color: colorTextDisabled,
           lineHeight: 1,
           pointerEvents: 'none',
+          transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
 
           '> *': {
             verticalAlign: 'top',
@@ -1251,7 +1097,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           insetInlineEnd: 0,
           color: colorTextDisabled,
           lineHeight: 1,
-          background: colorBgContainer,
           transform: 'translateY(-50%)',
           cursor: 'pointer',
           opacity: 0,
@@ -1301,6 +1146,12 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
             [`${componentCls}-clear`]: {
               opacity: 1,
             },
+            // Should use the following selector, but since `:has` has poor compatibility,
+            // we use `:not(:last-child)` instead, which may cause some problems in some cases.
+            // [`${componentCls}-suffix:has(+ ${componentCls}-clear)`]: {
+            [`${componentCls}-suffix:not(:last-child)`]: {
+              opacity: 0,
+            },
           },
 
           // Active bar
@@ -1569,50 +1420,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
   ];
 };
 
-export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): PickerPanelToken => {
-  const { componentCls, controlHeightLG, paddingXXS, padding } = token;
-
-  return {
-    pickerCellCls: `${componentCls}-cell`,
-    pickerCellInnerCls: `${componentCls}-cell-inner`,
-    pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(),
-    pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(),
-    pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(),
-    pickerCellBorderGap: 2, // Magic for gap between cells
-    pickerControlIconSize: 7,
-    pickerControlIconMargin: 4,
-    pickerControlIconBorderWidth: 1.5,
-    pickerDatePanelPaddingHorizontal: token
-      .calc(padding)
-      .add(token.calc(paddingXXS).div(2))
-      .equal(), // 18 in normal
-  };
-};
-
-export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => ({
-  cellHoverBg: token.controlItemBgHover,
-  cellActiveWithRangeBg: token.controlItemBgActive,
-  cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
-  cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
-  cellBgDisabled: token.colorBgContainerDisabled,
-  timeColumnWidth: token.controlHeightLG * 1.4,
-  timeColumnHeight: 28 * 8,
-  timeCellHeight: 28,
-  cellWidth: token.controlHeightSM * 1.5,
-  cellHeight: token.controlHeightSM,
-  textHeight: token.controlHeightLG,
-  withoutTimeCellHeight: token.controlHeightLG * 1.65,
-});
-
-export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => ({
-  ...initComponentToken(token),
-  ...initPanelComponentToken(token),
-  ...getArrowToken(token),
-  presetsWidth: 120,
-  presetsMaxWidth: 200,
-  zIndexPopup: token.zIndexPopupBase + 50,
-});
-
 // ============================== Export ==============================
 export default genStyleHooks(
   'DatePicker',
@@ -1620,6 +1427,7 @@ export default genStyleHooks(
     const pickerToken = mergeToken<PickerToken>(initInputToken(token), initPickerPanelToken(token));
     return [
       genPickerStyle(pickerToken),
+      genVariantsStyle(pickerToken),
       genPickerStatusStyle(pickerToken),
       // =====================================================
       // ==             Space Compact                       ==

components/date-picker/style/token.ts

@@ -0,0 +1,158 @@
+import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
+import type { ArrowToken } from '../../style/roundedArrow';
+import type {
+  FullToken,
+  TokenWithCommonCls,
+  GetDefaultToken,
+} from '../../theme/util/genComponentStyleHook';
+import type { GlobalToken } from '../../theme/interface';
+import { TinyColor } from '@ctrl/tinycolor';
+import { initComponentToken } from '../../input/style/token';
+import { getArrowToken } from '../../style/roundedArrow';
+
+export interface PanelComponentToken {
+  /**
+   * @desc 单元格悬浮态背景色
+   * @descEN Background color of cell hover state
+   */
+  cellHoverBg: string;
+  /**
+   * @desc 选取范围内的单元格背景色
+   * @descEN Background color of cell in range
+   */
+  cellActiveWithRangeBg: string;
+  /**
+   * @desc 选取范围内的单元格悬浮态背景色
+   * @descEN Background color of hovered cell in range
+   */
+  cellHoverWithRangeBg: string;
+  /**
+   * @desc 单元格禁用态背景色
+   * @descEN Background color of disabled cell
+   */
+  cellBgDisabled: string;
+  /**
+   * @desc 选取范围时单元格边框色
+   * @descEN Border color of cell in range when picking
+   */
+  cellRangeBorderColor: string;
+  /**
+   * @desc 时间列宽度
+   * @descEN Width of time column
+   */
+  timeColumnWidth: number;
+  /**
+   * @desc 时间列高度
+   * @descEN Height of time column
+   */
+  timeColumnHeight: number;
+  /**
+   * @desc 时间单元格高度
+   * @descEN Height of time cell
+   */
+  timeCellHeight: number;
+  /**
+   * @desc 单元格高度
+   * @descEN Height of cell
+   */
+  cellHeight: number;
+  /**
+   * @desc 单元格宽度
+   * @descEN Width of cell
+   */
+  cellWidth: number;
+  /**
+   * @desc 单元格文本高度
+   * @descEN Height of cell text
+   */
+  textHeight: number;
+  /**
+   * @desc 十年/年/季/月/周单元格高度
+   * @descEN Height of decade/year/quarter/month/week cell
+   */
+  withoutTimeCellHeight: number;
+}
+
+export interface ComponentToken
+  extends Exclude<SharedComponentToken, 'addonBg'>,
+    PanelComponentToken,
+    ArrowToken {
+  /**
+   * @desc 预设区域宽度
+   * @descEN Width of preset area
+   */
+  presetsWidth: number;
+  /**
+   * @desc 预设区域最大宽度
+   * @descEN Max width of preset area
+   */
+  presetsMaxWidth: number;
+  /**
+   * @desc 弹窗 z-index
+   * @descEN z-index of popup
+   */
+  zIndexPopup: number;
+}
+
+export type PickerPanelToken = {
+  pickerCellCls: string;
+  pickerCellInnerCls: string;
+  pickerDatePanelPaddingHorizontal: number | string;
+  pickerYearMonthCellWidth: number | string;
+  pickerCellPaddingVertical: number | string;
+  pickerQuarterPanelContentHeight: number | string;
+  pickerCellBorderGap: number;
+  pickerControlIconSize: number;
+  pickerControlIconMargin: number;
+  pickerControlIconBorderWidth: number;
+};
+
+export type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken;
+
+export type SharedPickerToken = TokenWithCommonCls<GlobalToken> &
+  PickerPanelToken &
+  PanelComponentToken;
+
+export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): PickerPanelToken => {
+  const { componentCls, controlHeightLG, paddingXXS, padding } = token;
+
+  return {
+    pickerCellCls: `${componentCls}-cell`,
+    pickerCellInnerCls: `${componentCls}-cell-inner`,
+    pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(),
+    pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(),
+    pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(),
+    pickerCellBorderGap: 2, // Magic for gap between cells
+    pickerControlIconSize: 7,
+    pickerControlIconMargin: 4,
+    pickerControlIconBorderWidth: 1.5,
+    pickerDatePanelPaddingHorizontal: token
+      .calc(padding)
+      .add(token.calc(paddingXXS).div(2))
+      .equal(), // 18 in normal
+  };
+};
+
+export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => ({
+  cellHoverBg: token.controlItemBgHover,
+  cellActiveWithRangeBg: token.controlItemBgActive,
+  cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
+  cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
+  cellBgDisabled: token.colorBgContainerDisabled,
+  timeColumnWidth: token.controlHeightLG * 1.4,
+  timeColumnHeight: 28 * 8,
+  timeCellHeight: 28,
+  cellWidth: token.controlHeightSM * 1.5,
+  cellHeight: token.controlHeightSM,
+  textHeight: token.controlHeightLG,
+  withoutTimeCellHeight: token.controlHeightLG * 1.65,
+});
+
+export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => ({
+  ...initComponentToken(token),
+  ...initPanelComponentToken(token),
+  ...getArrowToken(token),
+  presetsWidth: 120,
+  presetsMaxWidth: 200,
+  zIndexPopup: token.zIndexPopupBase + 50,
+});

components/date-picker/style/variants.ts

@@ -0,0 +1,13 @@
+import type { PickerToken } from './token';
+import type { CSSObject } from '@ant-design/cssinjs';
+import { genBorderlessStyle, genFilledStyle, genOutlinedStyle } from '../../input/style/variants';
+
+const genVariantsStyle = (token: PickerToken): CSSObject => ({
+  [token.componentCls]: {
+    ...genOutlinedStyle(token),
+    ...genFilledStyle(token),
+    ...genBorderlessStyle(token),
+  },
+});
+
+export default genVariantsStyle;

components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap

@@ -1551,7 +1551,7 @@ Array [
                           >
                             <div
                               aria-required="true"
-                              class="ant-picker ant-picker-range"
+                              class="ant-picker ant-picker-range ant-picker-outlined"
                               style="width: 100%;"
                             >
                               <div

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3144,7 +3144,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-picker ant-picker-disabled"
+                class="ant-picker ant-picker-outlined ant-picker-disabled"
               >
                 <div
                   class="ant-picker-input"
@@ -3770,7 +3770,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-picker ant-picker-range ant-picker-disabled"
+                class="ant-picker ant-picker-range ant-picker-outlined ant-picker-disabled"
               >
                 <div
                   class="ant-picker-input ant-picker-input-active"
@@ -10982,7 +10982,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-default"
+              class="ant-picker ant-picker-default ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -11810,7 +11810,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -12438,7 +12438,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -14418,7 +14418,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -14683,7 +14683,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
           >
             <div
               aria-required="true"
-              class="ant-picker ant-picker-range"
+              class="ant-picker ant-picker-range ant-picker-outlined"
             >
               <div
                 class="ant-picker-input ant-picker-input-active"
@@ -15898,7 +15898,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
           >
             <div
               aria-required="true"
-              class="ant-picker ant-picker-range"
+              class="ant-picker ant-picker-range ant-picker-outlined"
             >
               <div
                 class="ant-picker-input ant-picker-input-active"
@@ -17926,7 +17926,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -22194,7 +22194,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-status-success ant-picker-has-feedback"
+              class="ant-picker ant-picker-outlined ant-picker-status-success ant-picker-has-feedback"
               style="width: 100%;"
             >
               <div
@@ -22843,7 +22843,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-status-warning ant-picker-has-feedback"
+              class="ant-picker ant-picker-outlined ant-picker-status-warning ant-picker-has-feedback"
               style="width: 100%;"
             >
               <div
@@ -24306,7 +24306,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
+              class="ant-picker ant-picker-range ant-picker-outlined ant-picker-status-error ant-picker-has-feedback"
               style="width: 100%;"
             >
               <div
@@ -26143,7 +26143,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                       class="ant-form-item-control-input-content"
                     >
                       <div
-                        class="ant-picker ant-picker-status-error"
+                        class="ant-picker ant-picker-outlined ant-picker-status-error"
                       >
                         <div
                           class="ant-picker-input"
@@ -26786,7 +26786,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                       class="ant-form-item-control-input-content"
                     >
                       <div
-                        class="ant-picker"
+                        class="ant-picker ant-picker-outlined"
                       >
                         <div
                           class="ant-picker-input"

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -2335,7 +2335,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-picker ant-picker-disabled"
+                class="ant-picker ant-picker-outlined ant-picker-disabled"
               >
                 <div
                   class="ant-picker-input"
@@ -2405,7 +2405,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-picker ant-picker-range ant-picker-disabled"
+                class="ant-picker ant-picker-range ant-picker-outlined ant-picker-disabled"
               >
                 <div
                   class="ant-picker-input ant-picker-input-active"
@@ -7319,7 +7319,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-default"
+              class="ant-picker ant-picker-default ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -7589,7 +7589,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -7661,7 +7661,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -7733,7 +7733,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -7806,7 +7806,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
           >
             <div
               aria-required="true"
-              class="ant-picker ant-picker-range"
+              class="ant-picker ant-picker-range ant-picker-outlined"
             >
               <div
                 class="ant-picker-input ant-picker-input-active"
@@ -7920,7 +7920,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
           >
             <div
               aria-required="true"
-              class="ant-picker ant-picker-range"
+              class="ant-picker ant-picker-range ant-picker-outlined"
             >
               <div
                 class="ant-picker-input ant-picker-input-active"
@@ -8033,7 +8033,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker"
+              class="ant-picker ant-picker-outlined"
             >
               <div
                 class="ant-picker-input"
@@ -10314,7 +10314,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-status-success ant-picker-has-feedback"
+              class="ant-picker ant-picker-outlined ant-picker-status-success ant-picker-has-feedback"
               style="width:100%"
             >
               <div
@@ -10407,7 +10407,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-status-warning ant-picker-has-feedback"
+              class="ant-picker ant-picker-outlined ant-picker-status-warning ant-picker-has-feedback"
               style="width:100%"
             >
               <div
@@ -10503,7 +10503,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-range ant-picker-status-error ant-picker-has-feedback"
+              class="ant-picker ant-picker-range ant-picker-outlined ant-picker-status-error ant-picker-has-feedback"
               style="width:100%"
             >
               <div
@@ -10991,7 +10991,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
                       class="ant-form-item-control-input-content"
                     >
                       <div
-                        class="ant-picker ant-picker-status-error"
+                        class="ant-picker ant-picker-outlined ant-picker-status-error"
                       >
                         <div
                           class="ant-picker-input"
@@ -11056,7 +11056,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
                       class="ant-form-item-control-input-content"
                     >
                       <div
-                        class="ant-picker"
+                        class="ant-picker ant-picker-outlined"
                       >
                         <div
                           class="ant-picker-input"

components/form/__tests__/__snapshots__/index.test.tsx.snap

@@ -552,7 +552,7 @@ exports[`Form form should support disabled 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-disabled"
+              class="ant-picker ant-picker-outlined ant-picker-disabled"
             >
               <div
                 class="ant-picker-input"
@@ -622,7 +622,7 @@ exports[`Form form should support disabled 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
-              class="ant-picker ant-picker-range ant-picker-disabled"
+              class="ant-picker ant-picker-range ant-picker-outlined ant-picker-disabled"
             >
               <div
                 class="ant-picker-input ant-picker-input-active"

components/input/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -884,7 +884,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
     style="width: 100px;"
   >
     <div
@@ -1480,7 +1480,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
     style="width: 100px;"
   >
     <div
@@ -3598,7 +3598,7 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-picker ant-picker-range"
+    class="ant-picker ant-picker-range ant-picker-outlined"
   >
     <div
       class="ant-picker-input ant-picker-input-active"
@@ -4780,7 +4780,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -7141,7 +7141,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
       value="input content"
     />
     <div
-      class="ant-picker"
+      class="ant-picker ant-picker-outlined"
       style="width: 50%;"
     >
       <div
@@ -7748,7 +7748,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
       value="input content"
     />
     <div
-      class="ant-picker ant-picker-range"
+      class="ant-picker ant-picker-range ant-picker-outlined"
       style="width: 70%;"
     >
       <div

components/input/__tests__/__snapshots__/demo.test.tsx.snap

@@ -592,7 +592,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
     style="width:100px"
   >
     <div
@@ -632,7 +632,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
     style="width:100px"
   >
     <div
@@ -993,7 +993,7 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-picker ant-picker-range"
+    class="ant-picker ant-picker-range ant-picker-outlined"
   >
     <div
       class="ant-picker-input ant-picker-input-active"
@@ -1074,7 +1074,7 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -2947,7 +2947,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
       value="input content"
     />
     <div
-      class="ant-picker"
+      class="ant-picker ant-picker-outlined"
       style="width:50%"
     >
       <div
@@ -2998,7 +2998,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
       value="input content"
     />
     <div
-      class="ant-picker ant-picker-range"
+      class="ant-picker ant-picker-range ant-picker-outlined"
       style="width:70%"
     >
       <div

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1300,7 +1300,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         value="input content"
       />
       <div
-        class="ant-picker ant-picker-compact-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-outlined ant-picker-compact-item ant-picker-compact-last-item"
         style="width: 50%;"
       >
         <div
@@ -1904,7 +1904,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       class="ant-space-compact ant-space-compact-block"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
         style="width: 70%;"
       >
         <div
@@ -3115,7 +3115,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         value="input content"
       />
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-last-item"
         style="width: 70%;"
       >
         <div
@@ -5015,7 +5015,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       class="ant-space-compact ant-space-compact-block"
     >
       <div
-        class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
         style="width: 70%;"
       >
         <div
@@ -6581,7 +6581,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       class="ant-space-compact ant-space-compact-block"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
       >
         <div
           class="ant-picker-input ant-picker-input-active"
@@ -10917,7 +10917,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
                 role="separator"
               />
               <div
-                class="ant-picker"
+                class="ant-picker ant-picker-outlined"
               >
                 <div
                   class="ant-picker-input"
@@ -11968,7 +11968,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
         style="width: 70%;"
       >
         <div
@@ -13794,7 +13794,7 @@ Array [
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
       >
         <div
           class="ant-picker-input"

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -938,7 +938,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         value="input content"
       />
       <div
-        class="ant-picker ant-picker-compact-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-outlined ant-picker-compact-item ant-picker-compact-last-item"
         style="width:50%"
       >
         <div
@@ -986,7 +986,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
         style="width:70%"
       >
         <div
@@ -1096,7 +1096,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         value="input content"
       />
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-last-item"
         style="width:70%"
       >
         <div
@@ -1499,7 +1499,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block"
     >
       <div
-        class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
         style="width:70%"
       >
         <div
@@ -1609,7 +1609,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
       >
         <div
           class="ant-picker-input ant-picker-input-active"
@@ -3463,7 +3463,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
+        class="ant-picker ant-picker-range ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
         style="width:70%"
       >
         <div
@@ -4016,7 +4016,7 @@ Array [
       class="ant-space-compact"
     >
       <div
-        class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
+        class="ant-picker ant-picker-outlined ant-picker-compact-item ant-picker-compact-first-item"
       >
         <div
           class="ant-picker-input"

components/time-picker/__tests__/__snapshots__/demo.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`renders components/time-picker/demo/12hours.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker"
+      class="ant-picker ant-picker-outlined"
     >
       <div
         class="ant-picker-input"
@@ -55,7 +55,7 @@ exports[`renders components/time-picker/demo/12hours.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker"
+      class="ant-picker ant-picker-outlined"
     >
       <div
         class="ant-picker-input"
@@ -101,7 +101,7 @@ exports[`renders components/time-picker/demo/12hours.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker"
+      class="ant-picker ant-picker-outlined"
     >
       <div
         class="ant-picker-input"
@@ -148,7 +148,7 @@ exports[`renders components/time-picker/demo/12hours.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/addon.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -193,7 +193,7 @@ exports[`renders components/time-picker/demo/addon.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/basic.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -236,140 +236,9 @@ exports[`renders components/time-picker/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/time-picker/demo/bordered.tsx correctly 1`] = `
-Array [
-  <div
-    class="ant-picker ant-picker-borderless"
-  >
-    <div
-      class="ant-picker-input"
-    >
-      <input
-        autocomplete="off"
-        placeholder="Select time"
-        readonly=""
-        size="10"
-        title=""
-        value=""
-      />
-      <span
-        class="ant-picker-suffix"
-      >
-        <span
-          aria-label="clock-circle"
-          class="anticon anticon-clock-circle"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="clock-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-            />
-            <path
-              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>,
-  <div
-    class="ant-picker ant-picker-range ant-picker-borderless"
-  >
-    <div
-      class="ant-picker-input ant-picker-input-active"
-    >
-      <input
-        autocomplete="off"
-        placeholder="Start time"
-        readonly=""
-        size="10"
-        value=""
-      />
-    </div>
-    <div
-      class="ant-picker-range-separator"
-    >
-      <span
-        aria-label="to"
-        class="ant-picker-separator"
-      >
-        <span
-          aria-label="swap-right"
-          class="anticon anticon-swap-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="swap-right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="0 0 1024 1024"
-            width="1em"
-          >
-            <path
-              d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <div
-      class="ant-picker-input"
-    >
-      <input
-        autocomplete="off"
-        placeholder="End time"
-        readonly=""
-        size="10"
-        value=""
-      />
-    </div>
-    <div
-      class="ant-picker-active-bar"
-      style="left:0;width:0;position:absolute"
-    />
-    <span
-      class="ant-picker-suffix"
-    >
-      <span
-        aria-label="clock-circle"
-        class="anticon anticon-clock-circle"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="clock-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-          />
-          <path
-            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders components/time-picker/demo/colored-popup.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -414,7 +283,7 @@ exports[`renders components/time-picker/demo/colored-popup.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/disabled.tsx correctly 1`] = `
 <div
-  class="ant-picker ant-picker-disabled"
+  class="ant-picker ant-picker-outlined ant-picker-disabled"
 >
   <div
     class="ant-picker-input"
@@ -460,7 +329,7 @@ exports[`renders components/time-picker/demo/disabled.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/hide-column.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -530,7 +399,7 @@ exports[`renders components/time-picker/demo/hide-column.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/interval-options.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -575,7 +444,7 @@ exports[`renders components/time-picker/demo/interval-options.tsx correctly 1`]
 
 exports[`renders components/time-picker/demo/range-picker.tsx correctly 1`] = `
 <div
-  class="ant-picker ant-picker-range"
+  class="ant-picker ant-picker-range ant-picker-outlined"
 >
   <div
     class="ant-picker-input ant-picker-input-active"
@@ -665,7 +534,7 @@ exports[`renders components/time-picker/demo/render-panel.tsx correctly 1`] = `
   style="padding-bottom:0;position:relative;min-width:0"
 >
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
     style="margin:0"
   >
     <div
@@ -719,7 +588,7 @@ exports[`renders components/time-picker/demo/size.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-large"
+      class="ant-picker ant-picker-large ant-picker-outlined"
     >
       <div
         class="ant-picker-input"
@@ -790,7 +659,7 @@ exports[`renders components/time-picker/demo/size.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker"
+      class="ant-picker ant-picker-outlined"
     >
       <div
         class="ant-picker-input"
@@ -861,7 +730,7 @@ exports[`renders components/time-picker/demo/size.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-small"
+      class="ant-picker ant-picker-small ant-picker-outlined"
     >
       <div
         class="ant-picker-input"
@@ -939,7 +808,7 @@ exports[`renders components/time-picker/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-status-error"
+      class="ant-picker ant-picker-outlined ant-picker-status-error"
     >
       <div
         class="ant-picker-input"
@@ -985,7 +854,7 @@ exports[`renders components/time-picker/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-status-warning"
+      class="ant-picker ant-picker-outlined ant-picker-status-warning"
     >
       <div
         class="ant-picker-input"
@@ -1031,7 +900,7 @@ exports[`renders components/time-picker/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-status-error"
+      class="ant-picker ant-picker-range ant-picker-outlined ant-picker-status-error"
     >
       <div
         class="ant-picker-input ant-picker-input-active"
@@ -1119,7 +988,7 @@ exports[`renders components/time-picker/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-picker ant-picker-range ant-picker-status-warning"
+      class="ant-picker ant-picker-range ant-picker-outlined ant-picker-status-warning"
     >
       <div
         class="ant-picker-input ant-picker-input-active"
@@ -1208,7 +1077,7 @@ exports[`renders components/time-picker/demo/status.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/suffix.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -1250,7 +1119,7 @@ exports[`renders components/time-picker/demo/suffix.tsx correctly 1`] = `
 
 exports[`renders components/time-picker/demo/value.tsx correctly 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -1292,3 +1161,404 @@ exports[`renders components/time-picker/demo/value.tsx correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders components/time-picker/demo/variant.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap:12px"
+>
+  <div
+    class="ant-flex"
+    style="gap:8px"
+  >
+    <div
+      class="ant-picker ant-picker-outlined"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Filled"
+          readonly=""
+          size="10"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="clock-circle"
+            class="anticon anticon-clock-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="clock-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-picker ant-picker-range ant-picker-outlined"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Filled"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder=""
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-flex"
+    style="gap:8px"
+  >
+    <div
+      class="ant-picker ant-picker-filled"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Filled"
+          readonly=""
+          size="10"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="clock-circle"
+            class="anticon anticon-clock-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="clock-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-picker ant-picker-range ant-picker-filled"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Filled"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder=""
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-flex"
+    style="gap:8px"
+  >
+    <div
+      class="ant-picker ant-picker-borderless"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Borderless"
+          readonly=""
+          size="10"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="clock-circle"
+            class="anticon anticon-clock-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="clock-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-picker ant-picker-range ant-picker-borderless"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Borderless"
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder=""
+          readonly=""
+          size="10"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="clock-circle"
+          class="anticon anticon-clock-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="clock-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;

components/time-picker/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TimePicker not render clean icon when allowClear is false 1`] = `
 <div
-  class="ant-picker"
+  class="ant-picker ant-picker-outlined"
 >
   <div
     class="ant-picker-input"
@@ -48,7 +48,7 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
 exports[`TimePicker prop locale should works 1`] = `
 Array [
   <div
-    class="ant-picker"
+    class="ant-picker ant-picker-outlined"
   >
     <div
       class="ant-picker-input"
@@ -1485,7 +1485,7 @@ Array [
 
 exports[`TimePicker rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-picker ant-picker-rtl"
+  class="ant-picker ant-picker-outlined ant-picker-rtl"
 >
   <div
     class="ant-picker-input"

components/time-picker/demo/bordered.md

@@ -1,7 +0,0 @@
-## zh-CN
-
-无边框样式。
-
-## en-US
-
-Bordered-less style component.

components/time-picker/demo/bordered.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { TimePicker } from 'antd';
-
-const { RangePicker } = TimePicker;
-
-const App: React.FC = () => (
-  <>
-    <TimePicker bordered={false} />
-    <RangePicker bordered={false} />
-  </>
-);
-
-export default App;

components/time-picker/demo/variant.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Flex, TimePicker } from 'antd';
+
+const { RangePicker } = TimePicker;
+
+const App: React.FC = () => (
+  <Flex vertical gap={12}>
+    <Flex gap={8}>
+      <TimePicker placeholder="Filled" />
+      <RangePicker placeholder={['Filled', '']} />
+    </Flex>
+    <Flex gap={8}>
+      <TimePicker variant="filled" placeholder="Filled" />
+      <RangePicker variant="filled" placeholder={['Filled', '']} />
+    </Flex>
+    <Flex gap={8}>
+      <TimePicker variant="borderless" placeholder="Borderless" />
+      <RangePicker variant="borderless" placeholder={['Borderless', '']} />
+    </Flex>
+  </Flex>
+);
+
+export default App;

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

@@ -27,7 +27,7 @@ By clicking the input box, you can select a time from a popup panel.
 <code src="./demo/12hours.tsx">12 hours</code>
 <code src="./demo/colored-popup.tsx" debug>Colored Popup</code>
 <code src="./demo/range-picker.tsx">Time Range Picker</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
+<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/suffix.tsx" debug>Suffix</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@@ -51,7 +51,6 @@ dayjs.extend(customParseFormat)
 | --- | --- | --- | --- | --- |
 | allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type |
 | autoFocus | If get focus when component mounted | boolean | false |  |
-| bordered | Whether has border style | boolean | true |  |
 | cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
 | className | The className of picker | string | - |  |
@@ -77,6 +76,7 @@ dayjs.extend(customParseFormat)
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
 | use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false |  |
 | value | To set time | [dayjs](http://day.js.org/) | - |  |
+| variant | Variants of picker | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
 | onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
 | onSelect | A callback function, executes when a value is selected | function(time: dayjs): void | - |  |

components/time-picker/index.zh-CN.md

@@ -28,7 +28,7 @@ demo:
 <code src="./demo/12hours.tsx">12 小时制</code>
 <code src="./demo/colored-popup.tsx" debug>色付きポップアップ</code>
 <code src="./demo/range-picker.tsx">范围选择器</code>
-<code src="./demo/bordered.tsx">无边框</code>
+<code src="./demo/variant.tsx" version="5.13.0">多种形态</code>
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/suffix.tsx" debug>后缀图标</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@@ -51,7 +51,6 @@ dayjs.extend(customParseFormat)
 | --- | --- | --- | --- | --- |
 | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
 | autoFocus | 自动获取焦点 | boolean | false |  |
-| bordered | 是否有边框 | boolean | true |  |
 | cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
 | className | 选择器类名 | string | - |  |
@@ -77,6 +76,7 @@ dayjs.extend(customParseFormat)
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |  |
 | value | 当前时间 | [dayjs](http://day.js.org/) | - |  |
+| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 |
 | onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |