日历

查看源代码

显示日期和星期几，便于与日期相关的互动。

演示

日一二三四五六
29
30
31
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
1
2
3
4
5
6
7
8
9
import {
  Calendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <Calendar>
      <div className="flex gap-1">
        <CalendarPrev />
        <CalendarTitle />
        <CalendarNext />
      </div>
      <CalendarGrid />
    </Calendar>
  );
}

用法

import {
  Calendar,
  CalendarTitle,
  CalendarPrev,
  CalendarNext,
  CalendarGrid,
} from "@resolid/react-ui";
  • Calendar: 包含日历的所有部分。
  • CalendarPrev: 日历导航按钮。它根据当前日历视图，导航一个月/一年/十年前的日历。
  • CalendarNext: 日历导航按钮。它根据当前日历视图，导航一个月/年/十年后的日历。
  • CalendarTitle: 日历的当前日期标题部分。
  • CalendarGrid: 日历的网格部分。
<Calendar>
  <div className="flex">
    <CalendarPrev />
    <CalendarTitle />
    <CalendarNext />
  </div>
  <CalendarGrid />
</Calendar>

特点

  • 完整的键盘导航
  • 完整焦点管理
  • 本地化支持
  • 高度可组合性

举例

日期限制

日一二三四五六
29
30
31
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
1
2
3
4
5
6
7
8
9
import {
  Calendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";
import { setDay } from "@resolid/utils/date";

export default function App() {
  return (
    <Calendar minDate={setDay(null, 6)} maxDate={setDay(null, 22)}>
      <div className="flex gap-1">
        <CalendarPrev />
        <CalendarTitle />
        <CalendarNext />
      </div>
      <CalendarGrid />
    </Calendar>
  );
}

禁用日期

日一二三四五六
29
30
31
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
1
2
3
4
5
6
7
8
9
import {
  Calendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <Calendar isDateDisabled={(date) => date.getDate() === 12}>
      <div className="flex gap-1">
        <CalendarPrev />
        <CalendarTitle />
        <CalendarNext />
      </div>
      <CalendarGrid />
    </Calendar>
  );
}

默认视图

1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
import {
  Calendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex gap-3">
      <Calendar defaultView="year">
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </Calendar>
      <Calendar defaultView="decade">
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </Calendar>
    </div>
  );
}

视图限制

1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
日一二三四五六
29
30
31
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
1
2
3
4
5
6
7
8
9
import {
  Calendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex gap-3">
      <Calendar minView="year">
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </Calendar>
      <Calendar maxView="year">
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </Calendar>
    </div>
  );
}

属性

属性
date

日期

类型Date | string默认值"today"必须false
属性
onDateChange

日期改变回调

类型(date: Date) => void默认值必须false
属性
minDate

最小日期

类型Date | null | string默认值必须false
属性
maxDate

最大日期

类型Date | null | string默认值必须false
属性
view

受控日历视图 - `month` - 月视图 - `year` - 年视图 - `decade` - 十年视图

类型"decade" | "month" | "year"默认值必须false
属性
defaultView

默认日历视图

类型"decade" | "month" | "year"默认值"month"必须false
属性
onViewChange

视图变化的回调

类型(view: CalendarView) => void默认值必须false
属性
minView

最小日历视图

类型"decade" | "month" | "year"默认值'month'必须false
属性
maxView

最大日历视图

类型"decade" | "month" | "year"默认值'decade'必须false
属性
size

大小

类型"sm" | "md" | "lg"默认值"md"必须false
属性
color

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"primary"必须false
属性
display

是否静态显示

类型boolean默认值必须false
属性
disabled

是否禁用

类型boolean默认值false必须false
属性
cellRender

自定义格子渲染

类型CalenderCellRender默认值必须false
属性
firstWeekContains

一年第一周必须包含的最小日期

类型1 | 4默认值1必须false
属性
isDateDisabled

判断日期是否禁用

类型(date: Date, view: CalendarView) => boolean默认值必须false
属性
onCellClick

点击或键盘确认选中日期时的回调

类型(date: Date, view: CalendarView) => void默认值必须false
属性
showWeekNumbers

是否显示周数

类型boolean默认值false必须false
属性
weekdayFormat

星期显示格式

- "long": "Sunday", "Monday", "Tuesday", etc.

- "short": "Sun", "Mon", "Tue", etc.

- "narrow": "S", "M", "T", etc.

类型"long" | "short" | "narrow"默认值'narrow'必须false
属性
weekStartsOn

一周的第一天

`0` - 周日 `1` - 周一 `2` - 周二 `3` - 周三 `4` - 周四 `5` - 周五 `6` - 周六

类型0 | 1 | 2 | 3 | 4 | 5 | 6默认值0必须false

建议更改此页面