Loongship UI

Appearance

Calendar 日历 ​

选择不含时间和时区的日期。默认使用中文、周一作为每周第一天，并显示固定六周。

命令行安装 ​

bash
npx @loongship-kit/ui add calendar

基础用法 ​

2026年8月
27
28
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
31
1
2
3
4
5
6
日期选择, 2026年8月
当前日期：未选择
查看代码
vue
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
import { shallowRef } from 'vue'
import { Calendar } from '@/components/loongship/calendar'

const date = shallowRef<CalendarDate>()
</script>

<template>
  <Calendar v-model="date" />
</template>

范围约束与双月 ​

八月 - 九月 2026年
27
28
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
31
1
2
3
4
5
6
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
10
11
日期选择, 八月 - 九月 2026年
查看代码
vue
<template>
  <Calendar
    v-model="decoratedDate"
    :min-value="minDate"
    :max-value="maxDate"
    :is-date-unavailable="isDateUnavailable"
    :number-of-months="2"
  >
    <template #day="{ dayValue, today }">
      <strong v-if="today">{{ dayValue }}</strong>
      <template v-else>{{ dayValue }}</template>
    </template>
  </Calendar>
</template>

日期状态与插槽

isDateDisabled 用于业务上禁止选择的日期；isDateUnavailable 还会显示删除线，以区别于普通禁用状态。day 插槽仅改变日期格内容，不改变 Reka UI 提供的键盘和 ARIA 行为。

状态 ​

2026年8月
27
28
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
31
1
2
3
4
5
6
日期选择, 2026年8月
2026年8月
27
28
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
31
1
2
3
4
5
6
日期选择, 2026年8月
查看代码
vue
<template>
  <div class="calendar-demo-grid">
    <Calendar disabled :default-value="decoratedDate" />
    <Calendar readonly :default-value="decoratedDate" />
  </div>
</template>

API ​

属性 ​

属性类型默认值说明
v-modelCalendarDate | null-当前日期；清空时发出 undefined
defaultValueCalendarDate-非受控初始日期
defaultPlaceholderCalendarDate当前日期空值时初始展示月份
localestring'zh-CN'本地化格式
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 61每周第一天，1 为周一
weekdayFormat'narrow' | 'short' | 'long''narrow'星期标题格式
fixedWeeksbooleantrue固定显示六周
numberOfMonths1 | 21同时显示的月份数
minValueCalendarDate-最早可选日期
maxValueCalendarDate-最晚可选日期
isDateDisabled(date: DateValue) => boolean-判断日期是否禁用
isDateUnavailable(date: DateValue) => boolean-判断日期是否不可用
disabledbooleanfalse禁用日历
readonlybooleanfalse只读状态
requiredbooleanfalse必填状态
idstring-元素 ID
namestring-表单字段名
calendarLabelstring'日期选择'日历可访问名称
previousLabelstring'上个月'上个月按钮可访问名称
nextLabelstring'下个月'下个月按钮可访问名称
classClassValue-根节点自定义类名

事件 ​

事件参数说明
update:modelValuevalue: CalendarDate | undefined选中日期改变时触发

插槽 ​

插槽参数说明
day{ date, dayValue, disabled, selected, today, outsideView, outsideVisibleView, unavailable }自定义日期单元格内容