Calendar 日历

像素风格的日历组件，支持日期选择、月份导航、键盘操作和多语言。

?

名称	分类	说明	类型	默认值
type	? 风格	颜色类型	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
color	? 颜色	自定义十六进制颜色	string	—
modelValue / v-model	? 状态	当前选中的日期	Date	—
defaultMonth	? 状态	初始显示月份	Date	—
minDate	? 状态	可选范围的最小日期	Date	—
maxDate	? 状态	可选范围的最大日期	Date	—
disabledDate	? 行为	判断日期是否禁用的函数	(date: Date) => boolean	—
showOutsideDays	? 行为	是否显示当前月份之外的日期	boolean	true
weekStartsOn	? 行为	每周起始日（0=周日，1=周一）	0 | 1	0
yearRange	? 行为	年份下拉选择器的范围 [起始年, 结束年]	[number, number]	[currentYear - 10, currentYear + 10]
update:modelValue	? 事件	选中日期变化时触发	(date: Date) => void	—
month-change	? 事件	切换月份时触发	(date: Date) => void	—
focus	? 暴露	聚焦到日历	() => void	—
prevMonth	? 暴露	导航到上个月	() => void	—
nextMonth	? 暴露	导航到下个月	() => void	—

基础用法

使用 v-model 绑定选中的日期。日历默认显示当前月份。

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();
</script>

<template>
  <div class="demo-calendar">
    <px-calendar v-model="date" />
    <p v-if="date">Selected: {{ date.toLocaleDateString() }}</p>
  </div>
</template>

<style scoped>
.demo-calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
</style>

类型

使用 type 属性设置日历颜色主题。

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();
</script>

<template>
  <div class="demo-calendar-types">
    <px-calendar v-model="date" type="primary" />
    <px-calendar v-model="date" type="success" />
    <px-calendar v-model="date" type="warning" />
    <px-calendar v-model="date" type="danger" />
    <px-calendar v-model="date" type="info" />
  </div>
</template>

<style scoped>
.demo-calendar-types {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>

禁用日期

使用 disabledDate 函数或 minDate/maxDate 来限制可选日期。

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();

const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

const today = new Date();
const minDate = new Date(today.getFullYear(), today.getMonth(), 1);
const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
</script>

<template>
  <div class="demo-calendar-disabled">
    <div>
      <p>Disable weekends:</p>
      <px-calendar v-model="date" :disabled-date="isWeekend" />
    </div>
    <div>
      <p>Date range (current month only):</p>
      <px-calendar v-model="date" :min-date="minDate" :max-date="maxDate" />
    </div>
  </div>
</template>

<style scoped>
.demo-calendar-disabled {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
</style>

自定义颜色

使用 color 属性设置自定义十六进制颜色。

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>();
</script>

<template>
  <div class="demo-calendar-color">
    <px-calendar v-model="date" color="#e64553" />
    <px-calendar v-model="date" color="#8839ef" />
    <px-calendar v-model="date" color="#40a02b" />
  </div>
</template>

<style scoped>
.demo-calendar-color {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>