mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-29 20:08:37 +08:00
e7aa014c31
* docs: init * chore: all types * docs: faq * chore: fix lint
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { DatePicker, Space } from 'antd';
|
|
import type { GetProps } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
|
|
type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
|
|
|
|
dayjs.extend(customParseFormat);
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const range = (start: number, end: number) => {
|
|
const result = [];
|
|
for (let i = start; i < end; i++) {
|
|
result.push(i);
|
|
}
|
|
return result;
|
|
};
|
|
|
|
// eslint-disable-next-line arrow-body-style
|
|
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
|
|
// Can not select days before today and today
|
|
return current && current < dayjs().endOf('day');
|
|
};
|
|
|
|
const disabledDateTime = () => ({
|
|
disabledHours: () => range(0, 24).splice(4, 20),
|
|
disabledMinutes: () => range(30, 60),
|
|
disabledSeconds: () => [55, 56],
|
|
});
|
|
|
|
const disabledRangeTime: RangePickerProps['disabledTime'] = (_, type) => {
|
|
if (type === 'start') {
|
|
return {
|
|
disabledHours: () => range(0, 60).splice(4, 20),
|
|
disabledMinutes: () => range(30, 60),
|
|
disabledSeconds: () => [55, 56],
|
|
};
|
|
}
|
|
return {
|
|
disabledHours: () => range(0, 60).splice(20, 4),
|
|
disabledMinutes: () => range(0, 31),
|
|
disabledSeconds: () => [55, 56],
|
|
};
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Space direction="vertical" size={12}>
|
|
<DatePicker
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
disabledDate={disabledDate}
|
|
disabledTime={disabledDateTime}
|
|
showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}
|
|
/>
|
|
<DatePicker picker="month" disabledDate={disabledDate} />
|
|
<RangePicker disabledDate={disabledDate} />
|
|
<RangePicker
|
|
disabledDate={disabledDate}
|
|
disabledTime={disabledRangeTime}
|
|
showTime={{
|
|
hideDisabledOptions: true,
|
|
defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
|
|
}}
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
/>
|
|
</Space>
|
|
);
|
|
|
|
export default App;
|