bz-calendar 日历

基本用法

日历组件可以展示当前或任意时间节点的日期，常用于日程相关的场景， 1.0.1 版本开始支持此组件。

扫码预览

用BoosHi扫码或PC端点击

<template>
  <view class="demo-ui-page">
    <view class="demo-content">
      <view class="demo-title">bz-calendar 日历</view>
      <demo-cell title="日历用法" TBPadding="0">
        <div class="demo-calendar-card">
          <bz-calendar @change="change" />
        </div>
      </demo-cell>
      <demo-cell title="聚焦某个时间" subTitle="date=2022-06-08" TBPadding="0">
        <div class="demo-calendar-card">
          <bz-calendar date="2022-06-08" @change="change" />
        </div>
      </demo-cell>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    change(e) {
      console.log("change事件:", e);
    },
  },
};
</script>

展开 刷新 关闭

属性说明

属性名	类型	说明	默认值
color	String	主题颜色	#1890ff
date	String	自定义当前时间选中时间	-
startDate	String	开始日期（开始日期之前的日期将 disable 不可选择	-
endDate	String	结束日期（结束日期之后的日期将 disable 不可选择	-
isRange	Boolean	是否为范围选择	false
showMonthBg	Boolean	是否展示月份背景	true
@change	{ range: 选择的区间时间, fullDate：选择的单项时间 }	选中改变时触发事件	-