🌐 Nodejs.cn

范围日历

PreviousNext

提供一个用于选择日期范围的日历视图。

Docs API Reference
Event Date, March - April 2026
March - April 2026
<script setup lang="ts">
import type { DateRange } from 'reka-ui'
import { getLocalTimeZone, today } from '@internationalized/date'
import { RangeCalendar } from '@/components/ui/range-calendar'

const start = today(getLocalTimeZone())
const end = start.add({ days: 7 })

const dateRange = ref({
  start,
  end,
}) as Ref<DateRange>
</script>

<template>
  <RangeCalendar
    v-model="dateRange"
    class="rounded-md border shadow-sm"
    :number-of-months="2"
    disable-days-outside-current-view
  />
</template>

关于

🌐 About

<RangeCalendar /> 组件建立在 Reka UI 范围日历 组件之上，该组件使用 @internationalized/date 包来处理日期。

🌐 The <RangeCalendar /> component is built on top of the Reka UI Range Calendar component, which uses the @internationalized/date package to handle dates.

如果你正在寻找普通日历，可以查看 Calendar 组件。

🌐 If you're looking for a normal calendar, check out the Calendar component.

安装

🌐 Installation

pnpm dlx shadcn-vue@latest add range-calendar

用法

🌐 Usage

<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";
</script>

<template>
  <RangeCalendar />
</template>
单选按钮组可调整大小