# Calendar 日历

日历组件用于弹出选择日期或日期区间。

提示

如果搭配表单,推荐使用 calendar-input,无需定义弹窗,更轻量的配置

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 示例

# 基础用法

可通过v-model | value:控制弹窗的显示

<template>
  <pi-card>
    <pi-section slot="title" padding="0" title="基础用法" />
    <template slot="body">
      <pi-form :model="baseUsed.calendarPanel" padding="0">
        <pi-form-item
          label-width="100"
          prop="name"
          label="活动时间"
          @click="baseUsed.show = true"
        >
          <pi-input v-model="baseUsed.value" disabled />
        </pi-form-item>
      </pi-form>
    </template>
  </pi-card>
  <pi-calendar
    v-model="baseUsed.show"
    :calendar-panel="{
      value: baseUsed.value
    }"
    @confirm="baseUsed.value = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: {
        show: false,
        value: '2020-5-20'
      },
    }
  }
}
</script>
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
32
33
34
35
36
37

# 范围选择

可通过v-model | value:与输入框进行双向绑定,自动显示选中的日期

<template>
  <pi-card>
    <pi-section slot="title" padding="0" title="范围选择" />
    <template slot="body">
      <pi-form :model="range.calendarPanel" padding="0">
        <pi-form-item label-width="100" prop="name" label="活动时间" @click="range.show = true">
          <pi-input class="pi-w-100P" :value="getRangeValue" disabled />
        </pi-form-item>
      </pi-form>
    </template>
  </pi-card>
  <pi-calendar
    v-model="range.show"
    :calendar-panel="{
      value: range.value,
      type: 'range'
    }"
    @confirm="range.value = $event"
  />
</template>

<script>
export default {
  data() {
    return {
      range: {
        show: false,
        value: ['2020-5-2', '2020-5-20']
      }
    }
  },
  computed: {
    getRangeValue() {
      return this.range.value.join(' - ')
    }
  }
}
</script>
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
32
33
34
35
36
37
38

# 范围选择

可通过设定type: 'range'设置日历组件以日期范围方式展示

提示

设置type: 'range'的时候,v-model | value 的类型应为Array

<template>
  <pi-calendar-panel v-model="range.value" type="range" />
</template>

<script>
export default {
  data() {
    return {
      range: {
        value: ['2019-08-11', '2019-08-28']
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# API

# Props

名称 描述 类型 必选 默认值
value 是否显示弹窗 false -
customStyle 自定义样式,对象形式 Object false {}
customClass 自定义样式类,字符串形式 String false ''
showTitle 是否显示title Boolean false true
title 标题 String false '日期选择'
titlePadding 标题 padding String | Number false 24
calendarPanel 弹窗面板的配置 Object false calendarPanel配置项
popup 弹窗的配置 Object false popup配置项

# Slots

名称 说明
title 组件的title

# Methods

Method Description Parameters
handleConfirm 确认选择 -

# Events

方法名称 说明 参数
close 关闭日历组件 -
confirm 确定选择 Date(type=date)
Date
Last updated: 2022/5/26 下午4:42:38
10:44