mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
docs: more doc
This commit is contained in:
parent
8fa8ec97f8
commit
ad9e5b0fce
@ -16,10 +16,10 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
|
||||
```tsx
|
||||
import type { BadgeProps } from 'antd';
|
||||
import { Badge, Calendar } from 'antd';
|
||||
import type { Moment } from 'moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import React from 'react';
|
||||
|
||||
const getListData = (value: Moment) => {
|
||||
const getListData = (value: Dayjs) => {
|
||||
let listData;
|
||||
switch (value.date()) {
|
||||
case 8:
|
||||
@ -50,14 +50,14 @@ const getListData = (value: Moment) => {
|
||||
return listData || [];
|
||||
};
|
||||
|
||||
const getMonthData = (value: Moment) => {
|
||||
const getMonthData = (value: Dayjs) => {
|
||||
if (value.month() === 8) {
|
||||
return 1394;
|
||||
}
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const monthCellRender = (value: Moment) => {
|
||||
const monthCellRender = (value: Dayjs) => {
|
||||
const num = getMonthData(value);
|
||||
return num ? (
|
||||
<div className="notes-month">
|
||||
@ -67,7 +67,7 @@ const App: React.FC = () => {
|
||||
) : null;
|
||||
};
|
||||
|
||||
const dateCellRender = (value: Moment) => {
|
||||
const dateCellRender = (value: Dayjs) => {
|
||||
const listData = getListData(value);
|
||||
return (
|
||||
<ul className="events">
|
||||
|
@ -15,6 +15,7 @@ A basic calendar component with Year/Month switch.
|
||||
|
||||
```tsx
|
||||
import { Alert, Calendar } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
@ -22,12 +23,12 @@ const App: React.FC = () => {
|
||||
const [value, setValue] = useState(dayjs('2017-01-25'));
|
||||
const [selectedValue, setSelectedValue] = useState(dayjs('2017-01-25'));
|
||||
|
||||
const onSelect = (newValue: Moment) => {
|
||||
const onSelect = (newValue: Dayjs) => {
|
||||
setValue(newValue);
|
||||
setSelectedValue(newValue);
|
||||
};
|
||||
|
||||
const onPanelChange = (newValue: Moment) => {
|
||||
const onPanelChange = (newValue: Dayjs) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
|
@ -18,12 +18,12 @@ Determing which panel to show with `mode` and `onPanelChange`.
|
||||
import type { DatePickerProps } from 'antd';
|
||||
import { DatePicker, Space } from 'antd';
|
||||
import type { RangePickerProps } from 'antd/es/date-picker';
|
||||
import type { Moment } from 'moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
type RangeValue = [Moment | null, Moment | null] | null;
|
||||
type RangeValue = [Dayjs | null, Dayjs | null] | null;
|
||||
|
||||
const ControlledDatePicker = () => {
|
||||
const [mode, setMode] = useState<DatePickerProps['mode']>('time');
|
||||
|
@ -15,19 +15,19 @@ A example shows how to select a dynamic range by using `onCalendarChange` and `d
|
||||
|
||||
```tsx
|
||||
import { DatePicker } from 'antd';
|
||||
import type { Moment } from 'moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
type RangeValue = [Moment | null, Moment | null] | null;
|
||||
type RangeValue = [Dayjs | null, Dayjs | null] | null;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [dates, setDates] = useState<RangeValue>(null);
|
||||
const [hackValue, setHackValue] = useState<RangeValue>(null);
|
||||
const [value, setValue] = useState<RangeValue>(null);
|
||||
|
||||
const disabledDate = (current: Moment) => {
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates) {
|
||||
return false;
|
||||
}
|
||||
|
@ -22,22 +22,22 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
|
||||
|
||||
```tsx
|
||||
import { DatePicker, Space } from 'antd';
|
||||
import type { Moment } from 'moment';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [startValue, setStartValue] = useState<Moment | null>(null);
|
||||
const [endValue, setEndValue] = useState<Moment | null>(null);
|
||||
const [startValue, setStartValue] = useState<Dayjs | null>(null);
|
||||
const [endValue, setEndValue] = useState<Dayjs | null>(null);
|
||||
const [endOpen, setEndOpen] = useState(false);
|
||||
|
||||
const disabledStartDate = (startDate: Moment) => {
|
||||
const disabledStartDate = (startDate: Dayjs) => {
|
||||
if (!startDate || !endValue) {
|
||||
return false;
|
||||
}
|
||||
return startDate.valueOf() > endValue.valueOf();
|
||||
};
|
||||
|
||||
const disabledEndDate = (endDate: Moment) => {
|
||||
const disabledEndDate = (endDate: Dayjs) => {
|
||||
if (!endDate || !startValue) {
|
||||
return false;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user