docs: more doc

This commit is contained in:
zombiej 2022-05-21 23:12:09 +08:00
parent 8fa8ec97f8
commit ad9e5b0fce
5 changed files with 18 additions and 17 deletions

View File

@ -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">

View File

@ -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);
};

View File

@ -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');

View File

@ -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;
}

View File

@ -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;
}