# CalendarPanel 日历面板

日历面板，用于日期/日期范围的显示

# 平台差异说明

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

# 示例

# 基础用法

可通过v-model | value：设定默认选中的日期

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

<script>
export default {
  data() {
    return {
      base: {
        value: '2019-08-11'
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 双向绑定

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

<template>
  <pi-card>
    <pi-section slot="title" padding="0" title="双向绑定" />
    <template slot="body">
      <pi-calendar-panel v-model="sync.value" />
    </template>
    <view slot="footer" class=" pi-align-center">
      <pi-input v-model="sync.value" class="pi-flex-sub" />
      <pi-button type="primary" size="small">同步时间</pi-button>
    </view>
  </pi-card>
</template>

<script>
export default {
  data() {
    return {
      sync: {
        value: '2019-08-11'
      }
    }
  }
}
</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

# 范围选择

可通过设定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

# CalendarPanel Props

名称	描述	类型	必选	默认值
value	初始值	—	`false`	-
customStyle	自定义样式，对象形式	`Object`	`false`	{}
customClass	自定义样式类，字符串形式	`String`	`false`	''
minYear	可切换的最小年份	`Number \| String`	`false`	当前年份 - 80
maxYear	可切换的最大年份（默认当前年份）	`Number \| String`	`false`	当前年份 + 30
minDate	最小可选日期(不在范围内日期禁用不可选，默认''，不作限制)	`Number \| String \| Date`	`false`	''
maxDate	最大可选日期(不在范围内日期禁用不可选，默认''，不作限制)	`Number \| String \| Date`	`false`	''
showBackToday	是否显示回到今日	`Boolean`	`false`	`true`
todayActiveBorderColor	今日日期激活边框颜色	`String`	`false`	`#5072ff`
activeColor	起始结束日期字体颜色	`String`	`false`	`#ffffff`
activeBg	起始结束日期背景，默认	`String`	`false`	`#5072ff`
activeBorderRadius	选中圆角效果	`String \| Number`	`false`	'0 0 0 0'
rangeColor	范围内日期字体颜色默认	`String`	`false`	`#5072ff`
rangeBg	范围内日期背景色	`String`	`false`	`#5A7DFF25`
startText	type=range时生效，起始日期自定义文案	`String`	`false`	`开始`
endText	type=range时生效，结束日期自定义文案	`String`	`false`	`结束`
dateFormat	已选择的时间格式化	`String`	`false`	`YYYY-MM-DD`
type	日历类型`'date'-单个日期`, `'range'-范围日期`	`String`	`false`	`date`
canChangeWeekView	是否可切换周视图	`Boolean`	`false`	`true`
defalutWeekView	是否默认显示周视图	`Boolean`	`false`	`false`
marks	日期标记，数组形式	`Array`	`false`	`[]`

# CalendarPanel Events

方法名称	说明	参数
change	日期发生变化	-
input	日期发生变化	-

← Button 按钮 Card 卡片 →