# 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 日期发生变化 -
Last updated: 2023/4/20 下午5:56:26
10:44