日期选择

查看源代码

直接展示在页面中的日期选择组件，支持单个和多个日期选择。

演示

日一二三四五六
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 {
  DateCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

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

用法

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

特点

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

举例

可控值

你选择了日期：2026-03-15

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

export default function App() {
  const [value, setValue] = useState("2026-03-15");

  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm">你选择了日期：{value}</p>
      <DateCalendar value={value} onChange={setValue}>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateCalendar>
    </div>
  );
}

多选

日一二三四五六
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 {
  DateCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

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

月选择

1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
import {
  DateCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex gap-5">
      <DateCalendar minView="year" format="YYYY-MM">
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateCalendar>
      <DateCalendar minView="year" format="YYYY-MM" multiple>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateCalendar>
    </div>
  );
}

年选择

2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
import {
  DateCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className="flex gap-5">
      <DateCalendar minView="decade" format="YYYY">
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateCalendar>
      <DateCalendar minView="decade" format="YYYY" multiple>
        <div className="flex gap-1">
          <CalendarPrev />
          <CalendarTitle />
          <CalendarNext />
        </div>
        <CalendarGrid />
      </DateCalendar>
    </div>
  );
}

无效日期

日一二三四五六
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 {
  DateCalendar,
  CalendarPrev,
  CalendarNext,
  CalendarTitle,
  CalendarGrid,
} from "@resolid/react-ui";
import { isWeekend } from "@resolid/utils/date";

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

属性

属性
name

字段的名称, 提交表单时使用

类型string默认值必须false
属性
multiple

是否多个值

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

受控值

类型string | string[] | null默认值必须false
属性
defaultValue

默认值

类型string | string[] | null默认值null | []必须false
属性
onChange

onChange 回调

类型(value: string | string[] | null) => void默认值必须false
属性
minValue

最小值

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

最大值

类型string | null默认值必须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
属性
focusedValue

聚焦日期

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

默认聚焦日期

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

聚焦日期变化回调

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

日期格式

| Token | 示例 | 说明 |

|-------|------|------|

| `YYYY` | 2026 | 4 位年份 |

| `YY` | 26 | 2 位年份 |

|-------|------|------|

| `MMMM` | 三月/March | 完整月份名（本地化） |

| `MMM` | 3月/Mar | 缩写月份名（本地化） |

| `MM` | 03 | 2 位月份数字 |

| `M` | 3 | 月份数字 |

|-------|------|------|

| `DD` | 06 | 2 位日期数字 |

| `D` | 6 | 日期数字 |

|-------|------|------|

| `dddd` | 星期五/Friday | 完整星期名（本地化） |

| `ddd` | 周五/Fri | 缩写星期名（本地化） |

| `d` | 五/F | 单字符星期名（本地化） |

类型string默认值"YYYY-MM-DD"必须false
属性
size

大小

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

颜色

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

是否禁用

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

是否必需

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

是否只读

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

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

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

判断日期是否禁用

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

判断日期是否无效

类型(date: Date, view: CalendarView) => boolean默认值必须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

建议更改此页面