# 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

← RegionsSelect 地区选择器 NumberKeyboard 数字键盘 →