mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Merge pull request #34057 from ant-design/feat/momentjs-to-dayjs
feat(moment-to-dayjs): replace date-time lib Moment.js with Day.js
This commit is contained in:
二货机器人
GitHub
commit
69e1c33401
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import Moment from 'moment';
|
||||
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
|
||||
import Dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
|
||||
import { mount } from 'enzyme';
|
||||
import MockDate from 'mockdate';
|
||||
import Calendar from '..';
|
||||
@ -41,7 +42,7 @@ describe('Calendar', () => {
|
||||
});
|
||||
|
||||
it('Calendar should be selectable', () => {
|
||||
MockDate.set(Moment('2000-01-01').valueOf());
|
||||
MockDate.set(Dayjs('2000-01-01').valueOf());
|
||||
|
||||
const onSelect = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
@ -51,8 +52,7 @@ describe('Calendar', () => {
|
||||
expect(onSelect).toHaveBeenCalledWith(expect.anything());
|
||||
|
||||
const value = onSelect.mock.calls[0][0];
|
||||
expect(Moment.isMoment(value)).toBe(true);
|
||||
|
||||
expect(Dayjs.isDayjs(value)).toBe(true);
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
|
||||
MockDate.reset();
|
||||
@ -60,9 +60,9 @@ describe('Calendar', () => {
|
||||
|
||||
it('only Valid range should be selectable', () => {
|
||||
const onSelect = jest.fn();
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
|
||||
const validRange = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
|
||||
const wrapper = mount(
|
||||
<Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} />,
|
||||
<Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
|
||||
);
|
||||
wrapper.find('[title="2018-02-01"]').at(0).simulate('click');
|
||||
wrapper.find('[title="2018-02-02"]').at(0).simulate('click');
|
||||
@ -71,9 +71,9 @@ describe('Calendar', () => {
|
||||
|
||||
it('dates other than in valid range should be disabled', () => {
|
||||
const onSelect = jest.fn();
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
|
||||
const validRange = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
|
||||
const wrapper = mount(
|
||||
<Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} />,
|
||||
<Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
|
||||
);
|
||||
wrapper.find('[title="2018-02-20"]').at(0).simulate('click');
|
||||
const elem = wrapper.find('[title="2018-02-20"]').hasClass('ant-picker-cell-disabled');
|
||||
@ -83,12 +83,12 @@ describe('Calendar', () => {
|
||||
|
||||
it('months other than in valid range should be disabled', () => {
|
||||
const onSelect = jest.fn();
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
|
||||
const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
|
||||
const wrapper = mount(
|
||||
<Calendar
|
||||
onSelect={onSelect}
|
||||
validRange={validRange}
|
||||
defaultValue={Moment('2018-02-02')}
|
||||
defaultValue={Dayjs('2018-02-02')}
|
||||
mode="year"
|
||||
/>,
|
||||
);
|
||||
@ -103,7 +103,7 @@ describe('Calendar', () => {
|
||||
});
|
||||
|
||||
it('months other than in valid range should not be shown in header', () => {
|
||||
const validRange = [Moment('2017-02-02'), Moment('2018-05-18')];
|
||||
const validRange = [Dayjs('2017-02-02'), Dayjs('2018-05-18')];
|
||||
const wrapper = mount(<Calendar validRange={validRange} />);
|
||||
openSelect(wrapper, '.ant-picker-calendar-year-select');
|
||||
clickSelectItem(wrapper);
|
||||
@ -113,30 +113,30 @@ describe('Calendar', () => {
|
||||
});
|
||||
|
||||
it('getDateRange should returns a disabledDate function', () => {
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
|
||||
const wrapper = mount(<Calendar validRange={validRange} defaultValue={Moment('2018-02-02')} />);
|
||||
const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
|
||||
const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2018-02-02')} />);
|
||||
const { disabledDate } = wrapper.find('PickerPanel').props();
|
||||
expect(disabledDate(Moment('2018-06-02'))).toBe(true);
|
||||
expect(disabledDate(Moment('2018-04-02'))).toBe(false);
|
||||
expect(disabledDate(Dayjs('2018-06-02'))).toBe(true);
|
||||
expect(disabledDate(Dayjs('2018-04-02'))).toBe(false);
|
||||
});
|
||||
|
||||
it('validRange should work with disabledDate function', () => {
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
|
||||
const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
|
||||
const wrapper = mount(
|
||||
<Calendar validRange={validRange} disabledDate={data => data.isSame(Moment('2018-02-03'))} />,
|
||||
<Calendar validRange={validRange} disabledDate={data => data.isSame(Dayjs('2018-02-03'))} />,
|
||||
);
|
||||
|
||||
const { disabledDate } = wrapper.find('PickerPanel').props();
|
||||
expect(disabledDate(Moment('2018-02-01'))).toBe(true);
|
||||
expect(disabledDate(Moment('2018-02-02'))).toBe(false);
|
||||
expect(disabledDate(Moment('2018-02-03'))).toBe(true);
|
||||
expect(disabledDate(Moment('2018-02-04'))).toBe(false);
|
||||
expect(disabledDate(Moment('2018-06-01'))).toBe(true);
|
||||
expect(disabledDate(Dayjs('2018-02-01'))).toBe(true);
|
||||
expect(disabledDate(Dayjs('2018-02-02'))).toBe(false);
|
||||
expect(disabledDate(Dayjs('2018-02-03'))).toBe(true);
|
||||
expect(disabledDate(Dayjs('2018-02-04'))).toBe(false);
|
||||
expect(disabledDate(Dayjs('2018-06-01'))).toBe(true);
|
||||
});
|
||||
|
||||
it('Calendar MonthSelect should display correct label', () => {
|
||||
const validRange = [Moment('2018-02-02'), Moment('2019-06-1')];
|
||||
const wrapper = mount(<Calendar validRange={validRange} defaultValue={Moment('2019-01-01')} />);
|
||||
const validRange = [Dayjs('2018-02-02'), Dayjs('2019-06-1')];
|
||||
const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2019-01-01')} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -161,7 +161,7 @@ describe('Calendar', () => {
|
||||
});
|
||||
|
||||
it('Calendar should support locale', () => {
|
||||
MockDate.set(Moment('2018-10-19').valueOf());
|
||||
MockDate.set(Dayjs('2018-10-19').valueOf());
|
||||
// eslint-disable-next-line global-require
|
||||
const zhCN = require('../locale/zh_CN').default;
|
||||
const wrapper = mount(<Calendar locale={zhCN} />);
|
||||
@ -172,7 +172,7 @@ describe('Calendar', () => {
|
||||
describe('onPanelChange', () => {
|
||||
it('trigger when click last month of date', () => {
|
||||
const onPanelChange = jest.fn();
|
||||
const date = new Moment('1990-09-03');
|
||||
const date = new Dayjs('1990-09-03');
|
||||
const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
|
||||
|
||||
wrapper.find('.ant-picker-cell').at(0).simulate('click');
|
||||
@ -183,7 +183,7 @@ describe('Calendar', () => {
|
||||
|
||||
it('not trigger when in same month', () => {
|
||||
const onPanelChange = jest.fn();
|
||||
const date = new Moment('1990-09-03');
|
||||
const date = new Dayjs('1990-09-03');
|
||||
const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
|
||||
|
||||
wrapper.find('.ant-picker-cell').at(10).simulate('click');
|
||||
@ -194,7 +194,7 @@ describe('Calendar', () => {
|
||||
|
||||
it('switch should work correctly without prop mode', async () => {
|
||||
const onPanelChange = jest.fn();
|
||||
const date = new Moment(new Date(Date.UTC(2017, 7, 9, 8)));
|
||||
const date = new Dayjs(new Date(Date.UTC(2017, 7, 9, 8)));
|
||||
const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
|
||||
|
||||
expect(wrapper.find('CalendarHeader').props().mode).toBe('month');
|
||||
@ -212,7 +212,7 @@ describe('Calendar', () => {
|
||||
const wrapper = mount(
|
||||
<Header
|
||||
prefixCls="ant-picker-calendar"
|
||||
generateConfig={momentGenerateConfig}
|
||||
generateConfig={dayjsGenerateConfig}
|
||||
onChange={onValueChange}
|
||||
value={value}
|
||||
validRange={[start, end]}
|
||||
@ -224,32 +224,32 @@ describe('Calendar', () => {
|
||||
};
|
||||
|
||||
it('if value.month > end.month, set value.month to end.month', () => {
|
||||
const value = new Moment('1990-01-03');
|
||||
const start = new Moment('2019-04-01');
|
||||
const end = new Moment('2019-11-01');
|
||||
const value = new Dayjs('1990-01-03');
|
||||
const start = new Dayjs('2019-04-01');
|
||||
const end = new Dayjs('2019-11-01');
|
||||
const onValueChange = jest.fn();
|
||||
createWrapper(start, end, value, onValueChange);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3'));
|
||||
});
|
||||
|
||||
it('if start.month > value.month, set value.month to start.month', () => {
|
||||
const value = new Moment('1990-01-03');
|
||||
const start = new Moment('2019-11-01');
|
||||
const end = new Moment('2019-03-01');
|
||||
const value = new Dayjs('1990-01-03');
|
||||
const start = new Dayjs('2019-11-01');
|
||||
const end = new Dayjs('2019-03-01');
|
||||
const onValueChange = jest.fn();
|
||||
createWrapper(start, end, value, onValueChange);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('10'));
|
||||
});
|
||||
|
||||
it('if change year and new month > end month, set value.month to end.month', () => {
|
||||
const value = new Moment('2018-11-03');
|
||||
const start = new Moment('2000-01-01');
|
||||
const end = new Moment('2019-03-01');
|
||||
const value = new Dayjs('2018-11-03');
|
||||
const start = new Dayjs('2000-01-01');
|
||||
const end = new Dayjs('2019-03-01');
|
||||
const onValueChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Header
|
||||
prefixCls="ant-picker-calendar"
|
||||
generateConfig={momentGenerateConfig}
|
||||
generateConfig={dayjsGenerateConfig}
|
||||
onChange={onValueChange}
|
||||
value={value}
|
||||
validRange={[start, end]}
|
||||
@ -262,14 +262,14 @@ describe('Calendar', () => {
|
||||
});
|
||||
|
||||
it('onMonthChange should work correctly', () => {
|
||||
const start = new Moment('2018-11-01');
|
||||
const end = new Moment('2019-03-01');
|
||||
const value = new Moment('2018-12-03');
|
||||
const start = new Dayjs('2018-11-01');
|
||||
const end = new Dayjs('2019-03-01');
|
||||
const value = new Dayjs('2018-12-03');
|
||||
const onValueChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Header
|
||||
prefixCls="ant-picker-calendar"
|
||||
generateConfig={momentGenerateConfig}
|
||||
generateConfig={dayjsGenerateConfig}
|
||||
onChange={onValueChange}
|
||||
value={value}
|
||||
validRange={[start, end]}
|
||||
@ -284,11 +284,11 @@ describe('Calendar', () => {
|
||||
|
||||
it('onTypeChange should work correctly', () => {
|
||||
const onTypeChange = jest.fn();
|
||||
const value = new Moment('2018-12-03');
|
||||
const value = new Dayjs('2018-12-03');
|
||||
const wrapper = mount(
|
||||
<Header
|
||||
prefixCls="ant-picker-calendar"
|
||||
generateConfig={momentGenerateConfig}
|
||||
generateConfig={dayjsGenerateConfig}
|
||||
onModeChange={onTypeChange}
|
||||
locale={{ year: '年', month: '月', locale: 'zh_CN' }}
|
||||
value={value}
|
||||
|
||||
@ -15,6 +15,7 @@ Customize Calendar header content.
|
||||
|
||||
```jsx
|
||||
import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
function onPanelChange(value, mode) {
|
||||
console.log(value, mode);
|
||||
@ -29,11 +30,11 @@ export default () => (
|
||||
const end = 12;
|
||||
const monthOptions = [];
|
||||
|
||||
const current = value.clone();
|
||||
let current = value.clone();
|
||||
const localeData = value.localeData();
|
||||
const months = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
current.month(i);
|
||||
current = current.month(i);
|
||||
months.push(localeData.monthsShort(current));
|
||||
}
|
||||
|
||||
|
||||
@ -15,12 +15,12 @@ A basic calendar component with Year/Month switch.
|
||||
|
||||
```jsx
|
||||
import { Calendar, Alert } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
value: moment('2017-01-25'),
|
||||
selectedValue: moment('2017-01-25'),
|
||||
value: dayjs('2017-01-25'),
|
||||
selectedValue: dayjs('2017-01-25'),
|
||||
};
|
||||
|
||||
onSelect = value => {
|
||||
|
||||
@ -18,9 +18,9 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
|
||||
|
||||
```jsx
|
||||
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
|
||||
// import moment from 'moment';
|
||||
// import 'moment/locale/zh-cn';
|
||||
// moment.locale('zh-cn');
|
||||
// import dayjs from 'dayjs';
|
||||
// import 'dayjs/locale/zh-cn';
|
||||
// dayjs.locale('zh-cn');
|
||||
|
||||
<Calendar
|
||||
dateCellRender={dateCellRender}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Moment } from 'moment';
|
||||
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
|
||||
import generateCalendar, { CalendarProps } from './generateCalendar';
|
||||
|
||||
const Calendar = generateCalendar<Moment>(momentGenerateConfig);
|
||||
const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
|
||||
|
||||
export { CalendarProps };
|
||||
export default Calendar;
|
||||
|
||||
@ -19,9 +19,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
|
||||
```jsx
|
||||
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
|
||||
// import moment from 'moment';
|
||||
// import 'moment/locale/zh-cn';
|
||||
// moment.locale('zh-cn');
|
||||
// import dayjs from 'dayjs';
|
||||
// import 'dayjs/locale/zh-cn';
|
||||
// dayjs.locale('zh-cn');
|
||||
|
||||
<Calendar
|
||||
dateCellRender={dateCellRender}
|
||||
|
||||
@ -62,8 +62,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
[`&:last-child`]: {
|
||||
[`
|
||||
&,
|
||||
& > ${componentCls}-header`
|
||||
]: {
|
||||
& > ${componentCls}-header`]: {
|
||||
borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
|
||||
},
|
||||
},
|
||||
@ -86,9 +85,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
// FIXME
|
||||
verticalAlign: '-1px',
|
||||
|
||||
[`${componentCls}-rtl &`]: {
|
||||
|
||||
},
|
||||
[`${componentCls}-rtl &`]: {},
|
||||
|
||||
[`& svg`]: {
|
||||
// FIXME
|
||||
@ -187,7 +184,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const {
|
||||
@ -228,12 +225,11 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const genCollapseStyle: GenerateStyle<CollapseToken> = (token: CollapseToken): CSSInterpolation => [
|
||||
genBaseStyle(token),
|
||||
genBorderlessStyle(token),
|
||||
];
|
||||
export const genCollapseStyle: GenerateStyle<CollapseToken> = (
|
||||
token: CollapseToken,
|
||||
): CSSInterpolation => [genBaseStyle(token), genBorderlessStyle(token)];
|
||||
|
||||
export default genComponentStyleHook('Collapse', token => {
|
||||
const collapseToken = mergeToken<CollapseToken>(token, {
|
||||
|
||||
@ -16,9 +16,11 @@ A basic comment with author, avatar, time and actions.
|
||||
```jsx
|
||||
import React, { createElement, useState } from 'react';
|
||||
import { Comment, Tooltip, Avatar } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
const Demo = () => {
|
||||
const [likes, setLikes] = useState(0);
|
||||
const [dislikes, setDislikes] = useState(0);
|
||||
@ -65,8 +67,8 @@ const Demo = () => {
|
||||
</p>
|
||||
}
|
||||
datetime={
|
||||
<Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{moment().fromNow()}</span>
|
||||
<Tooltip title={dayjs().format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{dayjs().fromNow()}</span>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -15,7 +15,7 @@ Comment can be used as an editor, so the user can customize the contents of the
|
||||
|
||||
```jsx
|
||||
import { Comment, Avatar, Form, Button, List, Input } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
@ -67,7 +67,7 @@ class App extends React.Component {
|
||||
author: 'Han Solo',
|
||||
avatar: 'https://joeschmoe.io/api/v1/random',
|
||||
content: <p>{this.state.value}</p>,
|
||||
datetime: moment().fromNow(),
|
||||
datetime: dayjs().fromNow(),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -15,8 +15,10 @@ Displaying a series of comments using the `antd` List Component.
|
||||
|
||||
```jsx
|
||||
import { Comment, Tooltip, List } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
const data = [
|
||||
{
|
||||
actions: [<span key="comment-list-reply-to-0">Reply to</span>],
|
||||
@ -30,8 +32,8 @@ const data = [
|
||||
</p>
|
||||
),
|
||||
datetime: (
|
||||
<Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{moment().subtract(1, 'days').fromNow()}</span>
|
||||
<Tooltip title={dayjs().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{dayjs().subtract(1, 'days').fromNow()}</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
@ -47,8 +49,8 @@ const data = [
|
||||
</p>
|
||||
),
|
||||
datetime: (
|
||||
<Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{moment().subtract(2, 'days').fromNow()}</span>
|
||||
<Tooltip title={dayjs().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
|
||||
<span>{dayjs().subtract(2, 'days').fromNow()}</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import ConfigProvider from '..';
|
||||
import Alert from '../../alert';
|
||||
import Anchor from '../../anchor';
|
||||
@ -56,6 +57,7 @@ import Tree from '../../tree';
|
||||
import TreeSelect from '../../tree-select';
|
||||
import Upload from '../../upload';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
jest.mock('rc-util/lib/Portal');
|
||||
|
||||
describe('ConfigProvider', () => {
|
||||
@ -182,8 +184,8 @@ describe('ConfigProvider', () => {
|
||||
// Calendar
|
||||
testPair('Calendar', props => (
|
||||
<div>
|
||||
<Calendar {...props} value={moment('2000-09-03')} mode="month" />
|
||||
<Calendar {...props} value={moment('2000-09-03')} mode="year" />
|
||||
<Calendar {...props} value={dayjs('2000-09-03')} mode="month" />
|
||||
<Calendar {...props} value={dayjs('2000-09-03')} mode="year" />
|
||||
</div>
|
||||
));
|
||||
|
||||
@ -541,7 +543,7 @@ describe('ConfigProvider', () => {
|
||||
|
||||
// TimePicker
|
||||
testPair('TimePicker', props => (
|
||||
<TimePicker {...props} open defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
|
||||
<TimePicker {...props} open defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
|
||||
));
|
||||
|
||||
// Timeline
|
||||
|
||||
@ -30,10 +30,10 @@ import {
|
||||
} from 'antd';
|
||||
import enUS from 'antd/lib/locale/en_US';
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
moment.locale('en');
|
||||
dayjs.locale('en');
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
@ -109,7 +109,7 @@ class Page extends React.Component {
|
||||
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
|
||||
</div>
|
||||
<div className="site-config-provider-calendar-wrapper">
|
||||
<Calendar fullscreen={false} value={moment()} />
|
||||
<Calendar fullscreen={false} value={dayjs()} />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Table dataSource={[]} columns={columns} />
|
||||
@ -134,9 +134,9 @@ class App extends React.Component {
|
||||
const localeValue = e.target.value;
|
||||
this.setState({ locale: localeValue });
|
||||
if (!localeValue) {
|
||||
moment.locale('en');
|
||||
dayjs.locale('en');
|
||||
} else {
|
||||
moment.locale('zh-cn');
|
||||
dayjs.locale('zh-cn');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import MockDate from 'mockdate';
|
||||
import DatePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import 'dayjs/locale/mk'; // to test local in 'prop locale should works' test case
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
describe('DatePicker', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
@ -11,7 +15,7 @@ describe('DatePicker', () => {
|
||||
focusTest(DatePicker, { refFocus: true });
|
||||
|
||||
beforeEach(() => {
|
||||
MockDate.set(moment('2016-11-22').valueOf());
|
||||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
@ -59,13 +63,13 @@ describe('DatePicker', () => {
|
||||
placeholder: 'Избор на час',
|
||||
},
|
||||
};
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD');
|
||||
const wrapper = mount(<DatePicker open locale={locale} value={birthday} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('disabled date', () => {
|
||||
const disabledDate = current => current && current < moment().endOf('day');
|
||||
const disabledDate = current => current && current < dayjs().endOf('day');
|
||||
const wrapper = mount(<DatePicker disabledDate={disabledDate} open />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
@ -78,7 +82,7 @@ describe('DatePicker', () => {
|
||||
it('showTime={{ showHour: true, showMinute: true }}', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker
|
||||
defaultValue={moment()}
|
||||
defaultValue={dayjs()}
|
||||
showTime={{ showHour: true, showMinute: true }}
|
||||
format="YYYY-MM-DD"
|
||||
open
|
||||
@ -98,7 +102,7 @@ describe('DatePicker', () => {
|
||||
it('showTime={{ showHour: true, showSecond: true }}', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker
|
||||
defaultValue={moment()}
|
||||
defaultValue={dayjs()}
|
||||
showTime={{ showHour: true, showSecond: true }}
|
||||
format="YYYY-MM-DD"
|
||||
open
|
||||
@ -118,7 +122,7 @@ describe('DatePicker', () => {
|
||||
it('showTime={{ showMinute: true, showSecond: true }}', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker
|
||||
defaultValue={moment()}
|
||||
defaultValue={dayjs()}
|
||||
showTime={{ showMinute: true, showSecond: true }}
|
||||
format="YYYY-MM-DD"
|
||||
open
|
||||
@ -136,7 +140,7 @@ describe('DatePicker', () => {
|
||||
});
|
||||
it('showTime should work correctly when format is custom function', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
|
||||
<DatePicker defaultValue={dayjs()} showTime format={val => val.format('YYYY-MM-DD')} open />,
|
||||
);
|
||||
const input = wrapper.find('input').simulate('mousedown');
|
||||
expect(input.simulate.bind(input, 'focus')).not.toThrowError();
|
||||
@ -144,7 +148,7 @@ describe('DatePicker', () => {
|
||||
|
||||
it('12 hours', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
|
||||
<DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
|
||||
);
|
||||
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
|
||||
expect(
|
||||
@ -167,7 +171,7 @@ describe('DatePicker', () => {
|
||||
|
||||
it('24 hours', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
|
||||
<DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
|
||||
);
|
||||
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
|
||||
expect(
|
||||
@ -185,8 +189,8 @@ describe('DatePicker', () => {
|
||||
});
|
||||
|
||||
it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
|
||||
const startDate = moment('1982-02-12');
|
||||
const endDate = moment('1982-02-22');
|
||||
const startDate = dayjs('1982-02-12');
|
||||
const endDate = dayjs('1982-02-22');
|
||||
|
||||
const wrapper = mount(
|
||||
<DatePicker.RangePicker defaultPickerValue={[startDate, endDate]} showTime open />,
|
||||
@ -210,9 +214,7 @@ describe('DatePicker', () => {
|
||||
},
|
||||
});
|
||||
|
||||
const wrapper = mount(
|
||||
<DatePicker.RangePicker defaultValue={moment()} placement="bottomLeft" />,
|
||||
);
|
||||
const wrapper = mount(<DatePicker.RangePicker defaultValue={dayjs()} placement="bottomLeft" />);
|
||||
expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tl', 'bl']));
|
||||
wrapper.setProps({
|
||||
placement: 'bottomRight',
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import DatePicker from '..';
|
||||
import { setMockDate, resetMockDate } from '../../../tests/utils';
|
||||
import { openPicker, selectCell, closePicker } from './utils';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import enUS from '../locale/en_US';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
describe('RangePicker', () => {
|
||||
@ -22,7 +25,7 @@ describe('RangePicker', () => {
|
||||
|
||||
// issue: https://github.com/ant-design/ant-design/issues/5872
|
||||
it('should not throw error when value is reset to `[]`', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD');
|
||||
const wrapper = mount(<RangePicker value={[birthday, birthday]} open />);
|
||||
wrapper.setProps({ value: [] });
|
||||
|
||||
@ -80,8 +83,8 @@ describe('RangePicker', () => {
|
||||
const wrapper = mount(
|
||||
<RangePicker
|
||||
ranges={{
|
||||
Today: [moment(), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
Today: [dayjs(), dayjs()],
|
||||
'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
|
||||
}}
|
||||
open
|
||||
/>,
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
import React from 'react';
|
||||
import { mount, render } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import DatePicker from '..';
|
||||
import LocaleProvider from '../../locale-provider';
|
||||
import locale from '../../locale-provider/zh_CN';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import jaJP from '../../locale/ja_JP';
|
||||
import zhTW from '../locale/zh_TW';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const { MonthPicker, WeekPicker } = DatePicker;
|
||||
|
||||
@ -22,7 +26,7 @@ describe('Picker format by locale', () => {
|
||||
},
|
||||
};
|
||||
|
||||
const date = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
const date = dayjs('2000-01-01', 'YYYY-MM-DD');
|
||||
function matchPicker(name, Picker, props) {
|
||||
it(name, () => {
|
||||
const wrapper = mount(
|
||||
@ -43,14 +47,14 @@ describe('Picker format by locale', () => {
|
||||
|
||||
describe('MonthPicker and WeekPicker', () => {
|
||||
it('render MonthPicker', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const wrapper = mount(<MonthPicker open />);
|
||||
wrapper.setProps({ value: birthday });
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render WeekPicker', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const wrapper = mount(<WeekPicker open />);
|
||||
wrapper.setProps({ value: birthday });
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Moment } from 'moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import DatePicker from '..';
|
||||
import { DatePickRef, RangePickerRef } from '../generatePicker/interface';
|
||||
|
||||
@ -18,7 +18,7 @@ describe('DatePicker.typescript', () => {
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/33417
|
||||
it('DatePicker ref methods with forwardRef', () => {
|
||||
const MyDatePicker = React.forwardRef((props, ref: DatePickRef<Moment>) => (
|
||||
const MyDatePicker = React.forwardRef((props, ref: DatePickRef<Dayjs>) => (
|
||||
<DatePicker {...props} ref={ref} />
|
||||
));
|
||||
const datePicker = (
|
||||
@ -45,7 +45,7 @@ describe('DatePicker.typescript', () => {
|
||||
});
|
||||
|
||||
it('RangePicker ref methods with forwardRef', () => {
|
||||
const MyRangePicker = React.forwardRef((props, ref: RangePickerRef<Moment>) => (
|
||||
const MyRangePicker = React.forwardRef((props, ref: RangePickerRef<Dayjs>) => (
|
||||
<DatePicker.RangePicker {...props} ref={ref} />
|
||||
));
|
||||
const datePicker = (
|
||||
|
||||
@ -14,8 +14,11 @@ title:
|
||||
Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
|
||||
|
||||
```jsx
|
||||
import moment from 'moment';
|
||||
import { DatePicker, Space } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
@ -29,7 +32,7 @@ function range(start, end) {
|
||||
|
||||
function disabledDate(current) {
|
||||
// Can not select days before today and today
|
||||
return current && current < moment().endOf('day');
|
||||
return current && current < dayjs().endOf('day');
|
||||
}
|
||||
|
||||
function disabledDateTime() {
|
||||
@ -61,7 +64,7 @@ export default () => (
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
disabledDate={disabledDate}
|
||||
disabledTime={disabledDateTime}
|
||||
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
|
||||
showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}
|
||||
/>
|
||||
<DatePicker picker="month" disabledDate={disabledDate} />
|
||||
<RangePicker disabledDate={disabledDate} />
|
||||
@ -70,7 +73,7 @@ export default () => (
|
||||
disabledTime={disabledRangeTime}
|
||||
showTime={{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
|
||||
defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
|
||||
}}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
|
||||
@ -15,21 +15,24 @@ A disabled state of the `DatePicker`. You can also set as array to disable one o
|
||||
|
||||
```jsx
|
||||
import { DatePicker, Space } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const dateFormat = 'YYYY-MM-DD';
|
||||
export default () => (
|
||||
<Space direction="vertical" size={12}>
|
||||
<DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
|
||||
<DatePicker picker="month" defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
|
||||
<DatePicker defaultValue={dayjs('2015-06-06', dateFormat)} disabled />
|
||||
<DatePicker picker="month" defaultValue={dayjs('2015-06', 'YYYY-MM')} disabled />
|
||||
<RangePicker
|
||||
defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
|
||||
defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}
|
||||
disabled
|
||||
/>
|
||||
<RangePicker
|
||||
defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
|
||||
defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}
|
||||
disabled={[false, true]}
|
||||
/>
|
||||
</Space>
|
||||
|
||||
@ -15,7 +15,10 @@ We can set the date format by `format`.
|
||||
|
||||
```jsx
|
||||
import { DatePicker, Space } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
@ -28,21 +31,21 @@ const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
|
||||
const customFormat = value => `custom format: ${value.format(dateFormat)}`;
|
||||
|
||||
const customWeekStartEndFormat = value =>
|
||||
`${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
|
||||
`${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
|
||||
.endOf('week')
|
||||
.format(weekFormat)}`;
|
||||
|
||||
export default () => (
|
||||
<Space direction="vertical" size={12}>
|
||||
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
|
||||
<DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
|
||||
<DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />
|
||||
<DatePicker defaultValue={moment()} format={customWeekStartEndFormat} picker="week" />
|
||||
<DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
|
||||
<DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />
|
||||
<DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker="month" />
|
||||
<DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
|
||||
<RangePicker
|
||||
defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
|
||||
defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
|
||||
format={dateFormat}
|
||||
/>
|
||||
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat} />
|
||||
<DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />
|
||||
</Space>
|
||||
);
|
||||
```
|
||||
|
||||
@ -15,7 +15,7 @@ We can set preset ranges to RangePicker to improve user experience.
|
||||
|
||||
```jsx
|
||||
import { DatePicker, Space } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
@ -28,15 +28,15 @@ export default () => (
|
||||
<Space direction="vertical" size={12}>
|
||||
<RangePicker
|
||||
ranges={{
|
||||
Today: [moment(), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
Today: [dayjs(), dayjs()],
|
||||
'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
|
||||
}}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<RangePicker
|
||||
ranges={{
|
||||
Today: [moment(), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
Today: [dayjs(), dayjs()],
|
||||
'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
|
||||
}}
|
||||
showTime
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
|
||||
@ -29,7 +29,7 @@ The default locale is en-US, if you need to use other languages, recommend to us
|
||||
If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).
|
||||
|
||||
```jsx
|
||||
import 'moment/locale/zh-cn';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
|
||||
<DatePicker locale={locale} />;
|
||||
@ -37,12 +37,12 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
|
||||
```jsx
|
||||
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'antd/lib/locale/zh_CN';
|
||||
|
||||
<ConfigProvider locale={locale}>
|
||||
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
|
||||
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
||||
</ConfigProvider>;
|
||||
```
|
||||
|
||||
@ -56,9 +56,9 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
| 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 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
|
||||
| dateRender | Custom rendering function for date cells | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | |
|
||||
| disabled | Determine whether the DatePicker is disabled | boolean | false | |
|
||||
| disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | |
|
||||
| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | |
|
||||
| dropdownClassName | To customize the className of the popup calendar | string | - | |
|
||||
| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
|
||||
@ -92,17 +92,17 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledTime | To specify the time that cannot be selected | function(date) | - | |
|
||||
| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
|
||||
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
|
||||
| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
|
||||
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
|
||||
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
|
||||
| showToday | Whether to show `Today` button | boolean | true | |
|
||||
| value | To set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| value | To set date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | |
|
||||
| onOk | Callback when click ok button | function() | - | |
|
||||
| onPanelChange | Callback function for panel changing | function(value, mode) | - | |
|
||||
|
||||
@ -110,12 +110,12 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
|
||||
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` | |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` | |
|
||||
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | To set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| value | To set date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### DatePicker\[picker=quarter]
|
||||
|
||||
@ -123,55 +123,55 @@ Added in `4.1.0`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
|
||||
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | |
|
||||
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | To set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| value | To set date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### DatePicker\[picker=month]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
|
||||
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` | |
|
||||
| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | |
|
||||
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | To set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| value | To set date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### DatePicker\[picker=week]
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
|
||||
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |
|
||||
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
|
||||
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
|
||||
| value | To set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| value | To set date | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | |
|
||||
| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | |
|
||||
| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| disabled | If disable start or end | \[boolean, boolean] | - | |
|
||||
| disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \| `end`) | - | |
|
||||
| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` | |
|
||||
| ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||
| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - | |
|
||||
| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` | |
|
||||
| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | |
|
||||
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
|
||||
| separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` | |
|
||||
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | To set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
|
||||
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
|
||||
| value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
|
||||
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import { Moment } from 'moment';
|
||||
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
|
||||
import generatePicker, {
|
||||
PickerProps,
|
||||
PickerDateProps,
|
||||
RangePickerProps as BaseRangePickerProps,
|
||||
} from './generatePicker';
|
||||
|
||||
export type DatePickerProps = PickerProps<Moment>;
|
||||
export type MonthPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
|
||||
export type WeekPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
|
||||
export type RangePickerProps = BaseRangePickerProps<Moment>;
|
||||
export type DatePickerProps = PickerProps<Dayjs>;
|
||||
export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
|
||||
export type WeekPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
|
||||
export type RangePickerProps = BaseRangePickerProps<Dayjs>;
|
||||
|
||||
const DatePicker = generatePicker<Moment>(momentGenerateConfig);
|
||||
const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
|
||||
|
||||
export default DatePicker;
|
||||
|
||||
@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
|
||||
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
||||
|
||||
```jsx
|
||||
import 'moment/locale/zh-cn';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
|
||||
<DatePicker locale={locale} />;
|
||||
@ -38,12 +38,12 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
|
||||
```jsx
|
||||
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import locale from 'antd/lib/locale/zh_CN';
|
||||
|
||||
<ConfigProvider locale={locale}>
|
||||
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
|
||||
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
||||
</ConfigProvider>;
|
||||
```
|
||||
|
||||
@ -57,9 +57,9 @@ import locale from 'antd/lib/locale/zh_CN';
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| className | 选择器 className | string | - | |
|
||||
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
|
||||
| dateRender | 自定义日期单元格的内容 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | |
|
||||
| disabled | 禁用 | boolean | false | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - | |
|
||||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
@ -93,17 +93,17 @@ import locale from 'antd/lib/locale/zh_CN';
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [dayjs](https://day.js.org/) | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date) | - | |
|
||||
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` | |
|
||||
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||
| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
||||
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - | |
|
||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
||||
| onOk | 点击确定按钮的回调 | function() | - | |
|
||||
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
||||
|
||||
@ -111,12 +111,12 @@ import locale from 'antd/lib/locale/zh_CN';
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY` | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### DatePicker\[picker=quarter]
|
||||
|
||||
@ -124,55 +124,55 @@ import locale from 'antd/lib/locale/zh_CN';
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### DatePicker\[picker=month]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-MM` | |
|
||||
| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### DatePicker\[picker=week]
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | |
|
||||
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||
| defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||
| disabled | 禁用起始项 | \[boolean, boolean] | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - | |
|
||||
| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | 日期 | [moment](http://momentjs.com/)\[] | - | |
|
||||
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
|
||||
| value | 日期 | [dayjs](https://day.js.org/)\[] | - | |
|
||||
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,8 @@
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import preParsePostFormat from 'dayjs/plugin/preParsePostFormat';
|
||||
import MockDate from 'mockdate';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import {
|
||||
@ -17,70 +18,135 @@ import {
|
||||
} from '../..';
|
||||
import LocaleProvider from '..';
|
||||
import arEG from '../ar_EG';
|
||||
import 'dayjs/locale/ar';
|
||||
import azAZ from '../az_AZ';
|
||||
import 'dayjs/locale/az';
|
||||
import bgBG from '../bg_BG';
|
||||
import 'dayjs/locale/bg';
|
||||
import bnBD from '../bn_BD';
|
||||
import 'dayjs/locale/bn-bd';
|
||||
import byBY from '../by_BY';
|
||||
import 'dayjs/locale/be';
|
||||
import caES from '../ca_ES';
|
||||
import 'dayjs/locale/ca';
|
||||
import csCZ from '../cs_CZ';
|
||||
import 'dayjs/locale/cs';
|
||||
import deDE from '../de_DE';
|
||||
import 'dayjs/locale/de';
|
||||
import daDK from '../da_DK';
|
||||
import 'dayjs/locale/da';
|
||||
import elGR from '../el_GR';
|
||||
import 'dayjs/locale/el';
|
||||
import enGB from '../en_GB';
|
||||
import 'dayjs/locale/en-gb';
|
||||
import enUS from '../en_US';
|
||||
import 'dayjs/locale/en';
|
||||
import esES from '../es_ES';
|
||||
import 'dayjs/locale/es';
|
||||
import etEE from '../et_EE';
|
||||
import 'dayjs/locale/et';
|
||||
import faIR from '../fa_IR';
|
||||
import 'dayjs/locale/fa';
|
||||
import fiFI from '../fi_FI';
|
||||
import 'dayjs/locale/fi';
|
||||
import frBE from '../fr_BE';
|
||||
import frCA from '../fr_CA';
|
||||
import 'dayjs/locale/fr-ca';
|
||||
import frFR from '../fr_FR';
|
||||
import 'dayjs/locale/fr';
|
||||
import gaIE from '../ga_IE';
|
||||
import 'dayjs/locale/ga';
|
||||
import glES from '../gl_ES';
|
||||
import 'dayjs/locale/gl';
|
||||
import heIL from '../he_IL';
|
||||
import 'dayjs/locale/he';
|
||||
import hiIN from '../hi_IN';
|
||||
import 'dayjs/locale/hi';
|
||||
import hrHR from '../hr_HR';
|
||||
import 'dayjs/locale/hr';
|
||||
import huHU from '../hu_HU';
|
||||
import 'dayjs/locale/hu';
|
||||
import hyAM from '../hy_AM';
|
||||
import 'dayjs/locale/hy-am';
|
||||
import idID from '../id_ID';
|
||||
import 'dayjs/locale/id';
|
||||
import isIS from '../is_IS';
|
||||
import 'dayjs/locale/is';
|
||||
import itIT from '../it_IT';
|
||||
import 'dayjs/locale/it';
|
||||
import jaJP from '../ja_JP';
|
||||
import 'dayjs/locale/ja';
|
||||
import kaGE from '../ka_GE';
|
||||
import 'dayjs/locale/ka';
|
||||
import kkKZ from '../kk_KZ';
|
||||
import 'dayjs/locale/kk';
|
||||
import knIN from '../kn_IN';
|
||||
import 'dayjs/locale/kn';
|
||||
import koKR from '../ko_KR';
|
||||
import 'dayjs/locale/ko';
|
||||
import kmKH from '../km_KH';
|
||||
import 'dayjs/locale/km';
|
||||
import kmrIQ from '../kmr_IQ';
|
||||
import kuIQ from '../ku_IQ';
|
||||
import 'dayjs/locale/ku';
|
||||
import lvLV from '../lv_LV';
|
||||
import 'dayjs/locale/lv';
|
||||
import ltLT from '../lt_LT';
|
||||
import 'dayjs/locale/lt';
|
||||
import mkMK from '../mk_MK';
|
||||
import 'dayjs/locale/mk';
|
||||
import mlIN from '../ml_IN';
|
||||
import 'dayjs/locale/ml';
|
||||
import mnMN from '../mn_MN';
|
||||
import 'dayjs/locale/mn';
|
||||
import msMY from '../ms_MY';
|
||||
import 'dayjs/locale/ms';
|
||||
import nbNO from '../nb_NO';
|
||||
import 'dayjs/locale/nb';
|
||||
import neNP from '../ne_NP';
|
||||
import 'dayjs/locale/ne';
|
||||
import nlBE from '../nl_BE';
|
||||
import 'dayjs/locale/nl-be';
|
||||
import nlNL from '../nl_NL';
|
||||
import 'dayjs/locale/nl';
|
||||
import plPL from '../pl_PL';
|
||||
import 'dayjs/locale/pl';
|
||||
import ptBR from '../pt_BR';
|
||||
import 'dayjs/locale/pt-br';
|
||||
import ptPT from '../pt_PT';
|
||||
import 'dayjs/locale/pt';
|
||||
import roRO from '../ro_RO';
|
||||
import 'dayjs/locale/ro';
|
||||
import ruRU from '../ru_RU';
|
||||
import 'dayjs/locale/ru';
|
||||
import skSK from '../sk_SK';
|
||||
import 'dayjs/locale/sk';
|
||||
import slSI from '../sl_SI';
|
||||
import 'dayjs/locale/sl';
|
||||
import srRS from '../sr_RS';
|
||||
import 'dayjs/locale/sr';
|
||||
import svSE from '../sv_SE';
|
||||
import 'dayjs/locale/sv';
|
||||
import taIN from '../ta_IN';
|
||||
import 'dayjs/locale/ta';
|
||||
import thTH from '../th_TH';
|
||||
import 'dayjs/locale/th';
|
||||
import trTR from '../tr_TR';
|
||||
import 'dayjs/locale/tr';
|
||||
import ukUA from '../uk_UA';
|
||||
import 'dayjs/locale/uk';
|
||||
import viVN from '../vi_VN';
|
||||
import 'dayjs/locale/vi';
|
||||
import zhCN from '../zh_CN';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import zhHK from '../zh_HK';
|
||||
import 'dayjs/locale/zh-hk';
|
||||
import zhTW from '../zh_TW';
|
||||
import 'dayjs/locale/zh-tw';
|
||||
import urPK from '../ur_PK';
|
||||
import 'dayjs/locale/ur';
|
||||
|
||||
dayjs.extend(preParsePostFormat);
|
||||
|
||||
const locales = [
|
||||
azAZ,
|
||||
@ -178,13 +244,13 @@ const App = () => (
|
||||
<Option value="lucy">lucy</Option>
|
||||
</Select>
|
||||
<DatePicker open />
|
||||
<TimePicker open defaultOpenValue={moment()} />
|
||||
<TimePicker open defaultOpenValue={dayjs()} />
|
||||
<RangePicker open style={{ width: 200 }} />
|
||||
<Popconfirm title="Question?" visible>
|
||||
<a>Click to confirm</a>
|
||||
</Popconfirm>
|
||||
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
|
||||
<Calendar fullscreen={false} value={moment()} />
|
||||
<Calendar fullscreen={false} value={dayjs()} />
|
||||
<Table dataSource={[]} columns={columns} />
|
||||
<Modal title="Locale Modal" visible getContainer={false}>
|
||||
<p>Locale Modal</p>
|
||||
@ -200,7 +266,7 @@ describe('Locale Provider', () => {
|
||||
));
|
||||
|
||||
beforeAll(() => {
|
||||
MockDate.set(moment('2017-09-18T03:30:07.795').valueOf());
|
||||
MockDate.set(dayjs('2017-09-18T03:30:07.795').valueOf());
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
@ -260,7 +326,7 @@ describe('Locale Provider', () => {
|
||||
const Test = ({ locale }) => (
|
||||
<LocaleProvider locale={locale}>
|
||||
<div>
|
||||
<DatePicker defaultValue={moment()} open />
|
||||
<DatePicker defaultValue={dayjs()} open />
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
);
|
||||
|
||||
@ -34,9 +34,12 @@ import {
|
||||
Typography,
|
||||
Dropdown,
|
||||
} from 'antd';
|
||||
import moment from 'moment';
|
||||
import difference from 'lodash/difference';
|
||||
import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const { Panel } = Collapse;
|
||||
const { TreeNode } = Tree;
|
||||
@ -582,7 +585,7 @@ class App extends React.Component {
|
||||
<Meta title="Europe Street beat" description="www.instagram.com" />
|
||||
</Card>
|
||||
<Slider defaultValue={30} />
|
||||
<DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
|
||||
<DatePicker defaultValue={dayjs('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import MockDate from 'mockdate';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import { mount } from 'enzyme';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import Statistic from '..';
|
||||
@ -15,7 +15,7 @@ describe('Statistic', () => {
|
||||
rtlTest(Statistic);
|
||||
|
||||
beforeAll(() => {
|
||||
MockDate.set(moment('2018-11-28 00:00:00').valueOf());
|
||||
MockDate.set(dayjs('2018-11-28 00:00:00').valueOf());
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
@ -65,7 +65,7 @@ describe('Statistic', () => {
|
||||
|
||||
describe('Countdown', () => {
|
||||
it('render correctly', () => {
|
||||
const now = moment().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');
|
||||
const now = dayjs().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');
|
||||
|
||||
[
|
||||
['H:m:s', '59:28:9'],
|
||||
@ -151,7 +151,7 @@ describe('Statistic', () => {
|
||||
const onFinish = jest.fn();
|
||||
const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
|
||||
wrapper.update();
|
||||
MockDate.set(moment('2019-11-28 00:00:00').valueOf());
|
||||
MockDate.set(dayjs('2019-11-28 00:00:00').valueOf());
|
||||
await sleep(100);
|
||||
expect(onFinish).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@ -17,7 +17,7 @@ Countdown component.
|
||||
import { Statistic, Row, Col } from 'antd';
|
||||
|
||||
const { Countdown } = Statistic;
|
||||
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
|
||||
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK
|
||||
|
||||
function onFinish() {
|
||||
console.log('finished!');
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import TimePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { resetWarned } from '../../_util/devWarning';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
describe('TimePicker', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
@ -39,7 +42,7 @@ describe('TimePicker', () => {
|
||||
|
||||
it('not render clean icon when allowClear is false', () => {
|
||||
const wrapper = mount(
|
||||
<TimePicker defaultValue={moment('2000-01-01 00:00:00')} allowClear={false} />,
|
||||
<TimePicker defaultValue={dayjs('2000-01-01 00:00:00')} allowClear={false} />,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
@ -57,7 +60,7 @@ describe('TimePicker', () => {
|
||||
placeholder: 'Избери дата',
|
||||
};
|
||||
const wrapper = mount(
|
||||
<TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />,
|
||||
<TimePicker defaultValue={dayjs('2000-01-01 00:00:00')} open locale={locale} />,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
@ -66,7 +69,7 @@ describe('TimePicker', () => {
|
||||
const popupClassName = 'myCustomClassName';
|
||||
const wrapper = mount(
|
||||
<TimePicker
|
||||
defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
|
||||
defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
|
||||
popupClassName={popupClassName}
|
||||
/>,
|
||||
);
|
||||
@ -77,7 +80,7 @@ describe('TimePicker', () => {
|
||||
const popupClassName = 'myCustomClassName';
|
||||
const wrapper = mount(
|
||||
<TimePicker.RangePicker
|
||||
defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
|
||||
defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
|
||||
popupClassName={popupClassName}
|
||||
/>,
|
||||
);
|
||||
@ -88,7 +91,7 @@ describe('TimePicker', () => {
|
||||
const wrapper = mount(
|
||||
<TimePicker
|
||||
className="custom-class"
|
||||
defaultValue={moment('2000-01-01 00:00:00')}
|
||||
defaultValue={dayjs('2000-01-01 00:00:00')}
|
||||
bordered={false}
|
||||
/>,
|
||||
);
|
||||
|
||||
@ -15,13 +15,16 @@ Click `TimePicker`, and then we could select or input a time in panel.
|
||||
|
||||
```jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
function onChange(time, timeString) {
|
||||
console.log(time, timeString);
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
|
||||
<TimePicker onChange={onChange} defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
|
||||
);
|
||||
```
|
||||
|
||||
@ -16,7 +16,10 @@ Passing custom class to `TimePicker` popup
|
||||
|
||||
```jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
const onChange = (time, timeString) => {
|
||||
console.log(time, timeString);
|
||||
@ -25,7 +28,7 @@ const onChange = (time, timeString) => {
|
||||
export default () => (
|
||||
<TimePicker
|
||||
onChange={onChange}
|
||||
defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
|
||||
defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
|
||||
popupClassName="myCustomClassName"
|
||||
/>
|
||||
);
|
||||
|
||||
@ -15,7 +15,8 @@ A disabled state of the `TimePicker`.
|
||||
|
||||
```jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
export default () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;
|
||||
export default () => <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} disabled />;
|
||||
```
|
||||
|
||||
@ -15,9 +15,9 @@ While part of `format` is omitted, the corresponding column in panel will disapp
|
||||
|
||||
```jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const format = 'HH:mm';
|
||||
|
||||
export default () => <TimePicker defaultValue={moment('12:08', format)} format={format} />;
|
||||
export default () => <TimePicker defaultValue={dayjs('12:08', format)} format={format} />;
|
||||
```
|
||||
|
||||
@ -15,13 +15,13 @@ The input box comes in three sizes. large is used in the form, while the medium
|
||||
|
||||
```jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
|
||||
<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
|
||||
<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="large" />
|
||||
<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} />
|
||||
<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="small" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
@ -16,8 +16,11 @@ Click `TimePicker`, and then we could select or input a time in panel.
|
||||
|
||||
```jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
function onChange(time, timeString) {
|
||||
console.log(time, timeString);
|
||||
@ -27,7 +30,7 @@ export default () => (
|
||||
<TimePicker
|
||||
suffixIcon={<SmileOutlined />}
|
||||
onChange={onChange}
|
||||
defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
|
||||
defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
@ -18,9 +18,12 @@ By clicking the input box, you can select a time from a popup panel.
|
||||
---
|
||||
|
||||
```jsx
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
||||
|
||||
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
|
||||
dayjs.extend(customParseFormat)
|
||||
|
||||
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
@ -31,7 +34,7 @@ import moment from 'moment';
|
||||
| className | The className of picker | string | - | |
|
||||
| clearIcon | The custom clear icon | ReactNode | - | |
|
||||
| clearText | The clear tooltip of icon | string | clear | |
|
||||
| defaultValue | To set default time | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | To set default time | [dayjs](http://day.js.org/) | - | |
|
||||
| disabled | Determine whether the TimePicker is disabled | boolean | false | |
|
||||
| disabledTime | To specify the time that cannot be selected | [DisabledTime](#DisabledTime) | - | 4.19.0 |
|
||||
| format | To set the time format | string | `HH:mm:ss` | |
|
||||
@ -51,10 +54,10 @@ import moment from 'moment';
|
||||
| status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | 4.19.0 |
|
||||
| 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 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | |
|
||||
| value | To set time | [dayjs](http://day.js.org/) | - | |
|
||||
| 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: moment): void | - | |
|
||||
| onSelect | A callback function, executes when a value is selected | function(time: dayjs): void | - | |
|
||||
|
||||
#### DisabledTime
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Moment } from 'moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import * as React from 'react';
|
||||
import DatePicker from '../date-picker';
|
||||
import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
|
||||
@ -12,7 +12,7 @@ export interface TimePickerLocale {
|
||||
rangePlaceholder?: [string, string];
|
||||
}
|
||||
|
||||
export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Moment>, 'picker'> {
|
||||
export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Dayjs>, 'picker'> {
|
||||
popupClassName?: string;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) =>
|
||||
/>
|
||||
));
|
||||
|
||||
export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
|
||||
export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {
|
||||
addon?: () => React.ReactNode;
|
||||
popupClassName?: string;
|
||||
status?: InputStatus;
|
||||
|
||||
@ -19,8 +19,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
|
||||
---
|
||||
|
||||
```jsx
|
||||
import moment from 'moment';
|
||||
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
||||
|
||||
dayjs.extend(customParseFormat)
|
||||
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
@ -31,7 +34,7 @@ import moment from 'moment';
|
||||
| className | 选择器类名 | string | - | |
|
||||
| clearIcon | 自定义的清除图标 | ReactNode | - | |
|
||||
| clearText | 清除按钮的提示文案 | string | clear | |
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - | |
|
||||
| disabled | 禁用全部操作 | boolean | false | |
|
||||
| disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | 4.19.0 |
|
||||
| format | 展示的时间格式 | string | `HH:mm:ss` | |
|
||||
@ -51,8 +54,8 @@ import moment from 'moment';
|
||||
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |
|
||||
| value | 当前时间 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - | |
|
||||
| value | 当前时间 | [dayjs](http://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
||||
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
||||
|
||||
#### DisabledTime
|
||||
|
||||
@ -35,12 +35,12 @@ import { render } from 'react-dom';
|
||||
import { ConfigProvider, DatePicker, message } from 'antd';
|
||||
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import 'antd/dist/antd.css';
|
||||
import './index.css';
|
||||
|
||||
moment.locale('zh-cn');
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
const App = () => {
|
||||
const [date, setDate] = useState(null);
|
||||
|
||||
@ -122,9 +122,9 @@
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"classnames": "^2.2.6",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"dayjs": "^1.11.1",
|
||||
"lodash": "^4.17.21",
|
||||
"memoize-one": "^6.0.0",
|
||||
"moment": "^2.29.2",
|
||||
"rc-cascader": "~3.5.0",
|
||||
"rc-checkbox": "~2.3.0",
|
||||
"rc-collapse": "~3.1.0",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
const chalk = require('chalk');
|
||||
const fs = require('fs');
|
||||
const { join } = require('path');
|
||||
const moment = require('moment');
|
||||
const dayjs = require('dayjs');
|
||||
|
||||
const getChangelogByVersion = (content, version) => {
|
||||
const lines = content.split('\n');
|
||||
@ -51,8 +51,8 @@ if (!changeLog) {
|
||||
if (changeLog) {
|
||||
const text = changeLog.split('\n')[0];
|
||||
if (text.trim().startsWith('`') && text.trim().endsWith('`')) {
|
||||
const date = moment(text.trim().replace('`', '').replace('`', ''));
|
||||
if (date.isBetween(moment().add(-2, 'day'), moment().add(2, 'day'))) {
|
||||
const date = dayjs(text.trim().replace('`', '').replace('`', ''));
|
||||
if (date.isBetween(dayjs().add(-2, 'day'), dayjs().add(2, 'day'))) {
|
||||
console.log('\n');
|
||||
console.log(chalk.blue('[check-version-md]: Check Passed'));
|
||||
console.log('\n');
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable no-console */
|
||||
const fetch = require('isomorphic-fetch');
|
||||
const semver = require('semver');
|
||||
const moment = require('moment');
|
||||
const dayjs = require('dayjs');
|
||||
const inquirer = require('inquirer');
|
||||
const chalk = require('chalk');
|
||||
const { spawnSync } = require('child_process');
|
||||
@ -21,8 +21,8 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
|
||||
const versionList = Object.keys(time)
|
||||
.filter(version => semver.valid(version) && !semver.prerelease(version))
|
||||
.sort((v1, v2) => {
|
||||
const time1 = moment(time[v1]).valueOf();
|
||||
const time2 = moment(time[v2]).valueOf();
|
||||
const time1 = dayjs(time[v1]).valueOf();
|
||||
const time2 = dayjs(time[v2]).valueOf();
|
||||
|
||||
return time2 - time1;
|
||||
});
|
||||
@ -30,7 +30,7 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
|
||||
// Slice for choosing the latest versions
|
||||
const latestVersions = versionList.slice(0, 20).map(version => ({
|
||||
publishTime: time[version],
|
||||
timeDiff: moment().diff(moment(time[version])),
|
||||
timeDiff: dayjs().diff(dayjs(time[version])),
|
||||
value: version,
|
||||
}));
|
||||
|
||||
@ -65,7 +65,7 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
|
||||
message: 'Please select Conch Version:',
|
||||
choices: latestVersions.map(info => {
|
||||
const { value, publishTime } = info;
|
||||
const desc = moment(publishTime).fromNow();
|
||||
const desc = dayjs(publishTime).fromNow();
|
||||
|
||||
return {
|
||||
...info,
|
||||
|
||||
@ -162,7 +162,7 @@ module.exports = {
|
||||
/.*\.md/,
|
||||
/lodash/,
|
||||
/jquery/,
|
||||
/moment/,
|
||||
/dayjs/,
|
||||
/core-js/,
|
||||
/jsonml/,
|
||||
/ramda/,
|
||||
|
||||
@ -216,7 +216,6 @@ class Demo extends React.Component {
|
||||
.replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
|
||||
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
|
||||
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
|
||||
.replace("import moment from 'moment';", '')
|
||||
.replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
|
||||
.replace(
|
||||
/import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
|
||||
@ -235,7 +234,6 @@ class Demo extends React.Component {
|
||||
react18
|
||||
? 'react-dom@18/umd/react-dom.development.js'
|
||||
: 'react-dom@16.x/umd/react-dom.development.js',
|
||||
'moment/min/moment-with-locales.js',
|
||||
// eslint-disable-next-line no-undef
|
||||
`antd@${antdReproduceVersion}/dist/antd-with-locales.js`,
|
||||
`@ant-design/icons/dist/index.umd.js`,
|
||||
|
||||
@ -7,7 +7,7 @@ import themeSwitcher from 'theme-switcher';
|
||||
import { setTwoToneColor } from '@ant-design/icons';
|
||||
import { StyleProvider, createCache } from '@ant-design/cssinjs';
|
||||
import { Helmet, HelmetProvider } from 'react-helmet-async';
|
||||
import 'moment/locale/zh-cn';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import { browserHistory } from 'bisheng/router';
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
import * as React from 'react';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { Tabs, Skeleton, Avatar, Divider, Empty } from 'antd';
|
||||
import { useSiteData } from '../../Home/util';
|
||||
@ -70,7 +70,7 @@ export default () => {
|
||||
const mergedData = React.useMemo(() => {
|
||||
const yearData: Record<number | string, Record<string, Article[]>> = {};
|
||||
articles[isZhCN ? 'cn' : 'en']?.forEach(article => {
|
||||
const year = moment(article.date).year();
|
||||
const year = dayjs(article.date).year();
|
||||
yearData[year] = yearData[year] || {};
|
||||
yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ import * as React from 'react';
|
||||
import glob from 'glob';
|
||||
import { render } from 'enzyme';
|
||||
import MockDate from 'mockdate';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import { StyleProvider, createCache } from '@ant-design/cssinjs';
|
||||
import { TriggerProps } from 'rc-trigger';
|
||||
import { excludeWarning } from './excludeWarning';
|
||||
@ -68,7 +68,7 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
|
||||
testMethod(`cssinjs should not warn in ${file}`, () => {
|
||||
const errSpy = jest.spyOn(console, 'error');
|
||||
|
||||
MockDate.set(moment('2016-11-22').valueOf());
|
||||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||||
let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
|
||||
// Inject Trigger status unless skipped
|
||||
Demo = typeof Demo === 'function' ? <Demo /> : Demo;
|
||||
@ -91,7 +91,7 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
|
||||
() => {
|
||||
const errSpy = excludeWarning();
|
||||
|
||||
MockDate.set(moment('2016-11-22').valueOf());
|
||||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||||
let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
|
||||
// Inject Trigger status unless skipped
|
||||
Demo = typeof Demo === 'function' ? <Demo /> : Demo;
|
||||
|
||||
@ -5,7 +5,7 @@ import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
import glob from 'glob';
|
||||
import MockDate from 'mockdate';
|
||||
import moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const toMatchImageSnapshot = configureToMatchImageSnapshot({
|
||||
customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
|
||||
@ -27,7 +27,7 @@ export default function imageTest(component: React.ReactElement) {
|
||||
}
|
||||
};
|
||||
|
||||
MockDate.set(moment('2016-11-22').valueOf());
|
||||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||||
page.on('request', onRequestHandle);
|
||||
await page.goto(`file://${process.cwd()}/tests/index.html`);
|
||||
await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` });
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import Moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import MockDate from 'mockdate';
|
||||
import { mount } from 'enzyme';
|
||||
import ConfigProvider from '../../components/config-provider';
|
||||
@ -9,7 +9,7 @@ export default function rtlTest(Component: React.ComponentType, mockDate?: boole
|
||||
describe(`rtl render`, () => {
|
||||
it(`component should be rendered correctly in RTL direction`, () => {
|
||||
if (mockDate) {
|
||||
MockDate.set(Moment('2000-09-28').valueOf());
|
||||
MockDate.set(dayjs('2000-09-28').valueOf());
|
||||
}
|
||||
const wrapper = mount(
|
||||
<ConfigProvider direction="rtl">
|
||||
|
||||
@ -9,8 +9,6 @@ const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack
|
||||
const darkVars = require('./scripts/dark-vars');
|
||||
const compactVars = require('./scripts/compact-vars');
|
||||
|
||||
const { webpack } = getWebpackConfig;
|
||||
|
||||
function injectLessVariables(config, variables) {
|
||||
(Array.isArray(config) ? config : [config]).forEach(conf => {
|
||||
conf.module.rules.forEach(rule => {
|
||||
@ -35,13 +33,6 @@ function injectLessVariables(config, variables) {
|
||||
return config;
|
||||
}
|
||||
|
||||
// noParse still leave `require('./locale' + name)` in dist files
|
||||
// ignore is better: http://stackoverflow.com/q/25384360
|
||||
function ignoreMomentLocale(webpackConfig) {
|
||||
delete webpackConfig.module.noParse;
|
||||
webpackConfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
|
||||
}
|
||||
|
||||
function addLocales(webpackConfig) {
|
||||
let packageName = 'antd-with-locales';
|
||||
if (webpackConfig.entry['antd.min']) {
|
||||
@ -51,15 +42,6 @@ function addLocales(webpackConfig) {
|
||||
webpackConfig.output.filename = '[name].js';
|
||||
}
|
||||
|
||||
function externalMoment(config) {
|
||||
config.externals.moment = {
|
||||
root: 'moment',
|
||||
commonjs2: 'moment',
|
||||
commonjs: 'moment',
|
||||
amd: 'moment',
|
||||
};
|
||||
}
|
||||
|
||||
function injectWarningCondition(config) {
|
||||
config.module.rules.forEach(rule => {
|
||||
// Remove devWarning if needed
|
||||
@ -78,11 +60,17 @@ function injectWarningCondition(config) {
|
||||
});
|
||||
}
|
||||
|
||||
function externalDayjs(config) {
|
||||
config.externals.dayjs = {
|
||||
root: 'dayjs',
|
||||
commonjs2: 'dayjs',
|
||||
commonjs: 'dayjs',
|
||||
amd: 'dayjs',
|
||||
};
|
||||
}
|
||||
|
||||
function processWebpackThemeConfig(themeConfig, theme, vars) {
|
||||
themeConfig.forEach(config => {
|
||||
ignoreMomentLocale(config);
|
||||
externalMoment(config);
|
||||
|
||||
// rename default entry to ${theme} entry
|
||||
Object.keys(config.entry).forEach(entryName => {
|
||||
const originPath = config.entry[entryName];
|
||||
@ -138,9 +126,8 @@ webpackConfig.forEach(config => {
|
||||
|
||||
if (process.env.RUN_ENV === 'PRODUCTION') {
|
||||
webpackConfig.forEach(config => {
|
||||
ignoreMomentLocale(config);
|
||||
externalMoment(config);
|
||||
addLocales(config);
|
||||
externalDayjs(config);
|
||||
// Reduce non-minified dist files size
|
||||
config.optimization.usedExports = true;
|
||||
// use esbuild
|
||||
|
||||
Loading…
Reference in New Issue
Block a user