mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
feat: DatePicker support variant (#46568)
* feat: DatePicker support variant * chore: update snapshot * chore: update api table * chore: update snapshot
This commit is contained in:
MadCcc
GitHub
parent
5f395fbed3
commit
bf7085882d
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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;
|
||||
7
components/date-picker/demo/filled-debug.md
Normal file
7
components/date-picker/demo/filled-debug.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Filled Debug
|
||||
|
||||
## en-US
|
||||
|
||||
Filled Debug
|
||||
43
components/date-picker/demo/filled-debug.tsx
Normal file
43
components/date-picker/demo/filled-debug.tsx
Normal file
@ -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;
|
||||
7
components/date-picker/demo/variant.md
Normal file
7
components/date-picker/demo/variant.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
可选 `outlined` `filled` `borderless` 三种形态。
|
||||
|
||||
## en-US
|
||||
|
||||
There are `outlined` `fille` and `borderless`, totally three variants to choose from.
|
||||
23
components/date-picker/demo/variant.tsx
Normal file
23
components/date-picker/demo/variant.tsx
Normal file
@ -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;
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
)}
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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) | - | |
|
||||
|
||||
|
||||
@ -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) | - | |
|
||||
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
|
||||
import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
|
||||
import {
|
||||
genActiveStyle,
|
||||
genBasicInputStyle,
|
||||
initComponentToken,
|
||||
initInputToken,
|
||||
} from '../../input/style';
|
||||
import { genHoverStyle } from '../../input/style/variants';
|
||||
import { genPlaceholderStyle, initInputToken } from '../../input/style';
|
||||
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 { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
||||
import type { ArrowToken } from '../../style/roundedArrow';
|
||||
import { genRoundedArrow, getArrowToken } from '../../style/roundedArrow';
|
||||
import { genRoundedArrow } from '../../style/roundedArrow';
|
||||
import type {
|
||||
ComponentToken,
|
||||
PanelComponentToken,
|
||||
PickerPanelToken,
|
||||
PickerToken,
|
||||
SharedPickerToken,
|
||||
} from './token';
|
||||
import { initPanelComponentToken, initPickerPanelToken, prepareComponentToken } from './token';
|
||||
import genVariantsStyle from './variants';
|
||||
|
||||
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 type { ComponentToken, PanelComponentToken, PickerPanelToken };
|
||||
export { initPickerPanelToken, initPanelComponentToken };
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken;
|
||||
|
||||
type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken & PanelComponentToken;
|
||||
|
||||
const genPikerPadding = (
|
||||
const genPickerPadding = (
|
||||
token: PickerToken,
|
||||
inputHeight: number,
|
||||
fontHeight: number,
|
||||
@ -1025,58 +925,17 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
};
|
||||
|
||||
const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
colorBgContainer,
|
||||
colorError,
|
||||
errorActiveShadow,
|
||||
colorWarning,
|
||||
warningActiveShadow,
|
||||
colorErrorHover,
|
||||
colorWarningHover,
|
||||
} = token;
|
||||
const { componentCls, colorError, colorWarning } = 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}`,
|
||||
|
||||
'&: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',
|
||||
},
|
||||
transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`,
|
||||
|
||||
// ======================== 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 ==
|
||||
|
||||
158
components/date-picker/style/token.ts
Normal file
158
components/date-picker/style/token.ts
Normal file
@ -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,
|
||||
});
|
||||
13
components/date-picker/style/variants.ts
Normal file
13
components/date-picker/style/variants.ts
Normal file
@ -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;
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
`;
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
无边框样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Bordered-less style component.
|
||||
@ -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;
|
||||
23
components/time-picker/demo/variant.tsx
Normal file
23
components/time-picker/demo/variant.tsx
Normal file
@ -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;
|
||||
@ -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 | - | |
|
||||
|
||||
@ -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 | - | |
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user