calendar

Props

IMMCalendarProps

属性	类型	默认值	必传	说明
month	dayjs.Dayjs	当前月 dayjs()	否	日历对应的月份
allowClear	boolean	false	否	再次点击同一日期允许取消选择
visibleMonth	boolean	true	否	是否显示月份切换
shouldDisableDate	(dayjsObj: dayjs.Dayjs) => boolean		否	是否禁用日期
isSelected	boolean		是	是否选中
isDisabled	boolean		是	是否禁用
isThisMonth	boolean		是	是否本月日期
isBegin	boolean		是	是否范围选择中的开始日期
isEnd	boolean		是	是否范围选择中的结束日期
mode	EMode		是	类型

代码示例

import { View, Text } from "@tarojs/components";
import Card from "@wmeimob/taro-design/src/components/card";
import MMDivider from "@wmeimob/taro-design/src/components/divider";
import classnames from "classnames";
import dayjs from "dayjs";
import { useState } from "react";
import MMCalendar from "../../components/calendar";
import MMMonthSwitch from "../../components/monthSwitch";
import styles from "./index.module.less";
import MMPageContainer from "@wmeimob/taro-design/src/layout/mmPageContainer";
import { calendarstyleVar } from "../../components/styles/var";
import { styleVar } from "@wmeimob/taro-design/src/components/styles/themes/styleVar";

export default () => {
  return (
    <MMPageContainer navProps={{ title: "日历" }}>
      <View className="spacing" />
      <Basic />

      <View className="spacing" />
      <Multiple />
      <View className="spacing" />
      <DisableDate />
      <View className="spacing" />
      <Range />

      <View className="spacing" />
      <CustomMonthSwitch />

      <View className="spacing" />
      <CustomDates />
    </MMPageContainer>
  );
};

const shouldDisableDate = (date: dayjs.Dayjs) => {
  const today = dayjs();
  const beforeThreeDay = today.subtract(5, "day");
  const afterThreeDay = today.add(5, "day");

  // 禁用前后5天的日期
  return date.isAfter(beforeThreeDay) && date.isBefore(afterThreeDay);
};

// 单选日期
const Basic = () => {
  const [value, setValue] = useState<string | undefined>(() =>
    dayjs().format("YYYY-MM-DD")
  );

  return (
    <Card title="单选日期">
      <MMCalendar mode="single" value={value} onChange={setValue} />
    </Card>
  );
};

// 多选日期
const Multiple = () => {
  const [value, setValue] = useState<string[] | undefined>(() => [
    dayjs().format("YYYY-MM-01"),
    dayjs().format("YYYY-MM-03"),
    dayjs().format("YYYY-MM-05"),
    dayjs().format("YYYY-MM-11"),
    dayjs().format("YYYY-MM-12"),
    dayjs().format("YYYY-MM-13"),
    dayjs().format("YYYY-MM-14"),
  ]);

  return (
    <Card title="多选日期">
      <MMCalendar mode="multiple" value={value} onChange={setValue} />
    </Card>
  );
};

// 范围选择日期
const Range = () => {
  const [value, setValue] = useState<string[] | undefined>(() => [
    dayjs().format("YYYY-MM-01"),
    dayjs().format("YYYY-MM-14"),
  ]);

  return (
    <Card title="范围选择日期">
      <MMCalendar mode="range" value={value} onChange={setValue} />
    </Card>
  );
};

// 禁用指定日期
const DisableDate = () => {
  const [value, setValue] = useState<string>();

  return (
    <Card title="禁用指定日期">
      <MMCalendar
        mode="single"
        value={value}
        onChange={setValue}
        shouldDisableDate={shouldDisableDate}
      />
    </Card>
  );
};

// 自定义日期渲染
const CustomDates = () => {
  const [today] = useState(() => dayjs().format("YYYY-MM-DD"));
  const [dotDates] = useState(() => [
    dayjs().format("YYYY-MM-01"),
    dayjs().format("YYYY-MM-03"),
    dayjs().format("YYYY-MM-05"),
    dayjs().format("YYYY-MM-11"),
    dayjs().format("YYYY-MM-12"),
    dayjs().format("YYYY-MM-13"),
    dayjs().format("YYYY-MM-14"),
  ]);

  return (
    <Card title="自定义日期渲染">
      <MMCalendar
        value={today}
        shouldDisableDate={shouldDisableDate}
        renderLabel={(date, options) => {
          const {
            isSelected,
            isDisabled,
            isBegin,
            isEnd,
            isThisMonth,
            mode,
          } = options;
          const innerSelected = isSelected && options.isThisMonth;
          // const isRangeSelected = innerSelected && mode === EMode.Range

          const color = isDisabled
            ? styleVar.secondColor
            : innerSelected
            ? "#ffffff"
            : isThisMonth
            ? styleVar.secondColor
            : styleVar.gray4;

          return (
            <View
              style={{
                position: "relative",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: calendarstyleVar.cellWidth,
                height: calendarstyleVar.cellWidth,
              }}
              className={classnames({
                [styles.cell__isSelected]:
                  options.isSelected && options.isThisMonth,
                [styles.cell__isThisMonth]: options.isThisMonth,
              })}
            >
              <Text
                style={{
                  color,
                  opacity: options.isDisabled ? 0.3 : undefined,
                  textDecorationLine: options.isDisabled
                    ? "line-through"
                    : undefined,
                }}
              >
                {date.date()}
              </Text>

              {dotDates.some((dateString) =>
                date.isSame(dayjs(dateString), "date")
              ) && (
                <View
                  className={styles.cell__dot}
                  style={{
                    transform: IS_RN
                      ? ([{ translateX: -3 }] as any)
                      : "translateX(-50%)",
                  }}
                />
              )}
            </View>
          );
        }}
      />
    </Card>
  );
};

// 自定义月份切换控件
const CustomMonthSwitch = () => {
  const [month, setMonth] = useState(() => dayjs());

  return (
    <Card title="自定义月份切换控件">
      <MMMonthSwitch format="YYYY/MM" switchMonth={false} />
      <MMDivider />
      <View className="spacing" />
      <MMCalendar visibleMonth={false} month={month} onMonthChange={setMonth} />
    </Card>
  );
};