Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 3x 3x 3x 3x 3x 3x | import React, { useState } from "react";
import moment, { Moment, isMoment } from "moment";
import CalendarPart from "./CalendarPart";
import { StyledProps, Combine } from "../_type";
import { ControlledProps, useDefaultValue } from "../form/controlled";
import { CalendarTable } from "./CalendarTable";
import { RangeDateType, CalendarTableType } from "./DateProps";
import { useTranslation } from "../i18n";
export interface CalendarProps
extends Combine<StyledProps, ControlledProps<Moment>> {
/**
* 允许选择的日期范围,可同时使用 `disabledDate` 实现更精细控制
*/
range?: RangeDateType;
/**
* 可选的日期范围
*/
disabledDate?: (date: Moment) => boolean;
}
export function Calendar(props: CalendarProps) {
useTranslation(moment);
const { className, style, ...restProps } = useDefaultValue(props);
const [type, setType] = useState<CalendarTableType>("date");
const { value } = props;
const [curViewMoment, setCurViewMoment] = useState<Moment>(
isMoment(value) ? value : moment()
);
return (
<CalendarPart.Panel className={className} style={style}>
<CalendarPart.Body>
<CalendarTable
{...restProps}
curViewMoment={curViewMoment}
onCurViewMomentChange={setCurViewMoment}
type={type}
onTypeChange={setType}
/>
</CalendarPart.Body>
</CalendarPart.Panel>
);
}
|