Calendar 日历

显示日期

基础用法

基础的按钮用法

2025 年 3 月

一	二	三	四	五	六	日
24	25	26	27	28	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

设置 value来指定当前显示的月份。如果 value 未指定，则显示当月。value 支持 v-model 双向绑定。

<template>
  <jp-calendar v-model="value"></jp-calendar>
</template>

<script>
export default {
  data() {
    return {
      value: new Date()
    }
  }
}
</script>

显示代码

自定义内容

2025 年 3 月

一	二	三	四	五	六	日
24	25	26	27	28	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

通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。

<template>
  <jp-calendar>
    <template slot="dateCell" slot-scope="{ date, data }">
      <p v-if="date" :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}</p>
    </template>
  </jp-calendar>
</template>
<style>
.is-selected {
  color: #1989fa;
}
</style>

显示代码

自定义范围

2019 年 3 月

一	二	三	四	五	六	日
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24

设置 range 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。

<template>
  <jp-calendar :range="['2019-03-04', '2019-03-24']"></jp-calendar>
</template>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Date/string/number	—	—
range	时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。	Array	—	—
first-day-of-week	周起始日	Number	1 到 7	1

dateCell scoped slot 参数

参数	说明	类型	可选值	默认值
date	单元格代表的日期	Date	—	—
data	{ type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd	Object	—	—