CalendarPicker 日历选择器 APP
该方法或组件支持移动端小程序调用
PC
该方法或组件支持桌面端小程序调用

显示日历以用来选择日期或日期区间。

引入方式

数字生活小程序工程中,不需要 import,直接使用组件标签即可。

import { CalendarPicker } from '@21cnfe/vui'  
Vue.component('CalendarPicker', CalendarPicker)

代码演示

基本用法 日历初始化日期后,通过点击选择,回调返回选中的日历区间
<template>
<CalendarPicker :visiable.sync="visiable" @onSelect="onSelect"></CalendarPicker>
</template>
<script>
export default {
data () {
return {
visiable: false,
startDate: '',
endDate: ''
}
},
methods: {
onSelect (date) {
console.log(date)
this.startDate = date[0]
this.endDate = date[1]
}
}
}
</script>

API

属性 说明 类型 默认值
visiable 是否显示 Boolean false
defaultDate 初始化开始日期 Date (year/month/day) today
initalMonths 初始化月个数 Number 6
disbalePullFresh 禁止下拉刷新上一个月的日期数据 Boolean false

Events

事件名称 说明 回调参数
onSelect 选择日期区间回调 当前选中日期区间
  1. 1. CalendarPicker 日历选择器 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 引入方式
    2. 1.2. 代码演示
    3. 1.3. API
    4. 1.4. Events