更新记录

1.0.8(2025-02-14) 下载此版本

隐藏多余符号

1.0.7(2025-02-14) 下载此版本

新增切换月份自动滚动到当月一号,切回当前月份滚动至当天

1.0.6(2025-02-05) 下载此版本

新增弹窗标题

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Calendar 日历

组件名: xt-calendar

安装方式

本组件符合 easycom 规范,HBuilderX 3.1.0 起,只需将本组件导入项目,在页面 template 中即可直接使用,无需在页面中 import 和注册 components

基本用法

复制代码<template>
  <view>
    <view class="app_main">
      <xt-calendar
        @dayClick="dayClick"
        @yearClick="yearClick"
        @monthClick="monthClick"
      ></xt-calendar>

    </view>

  </view>

</template>

<script setup>
  const monthClick = (e) => {
    console.log("月份", e);
  };
  const yearClick = (e) => {
    console.log("年份", e);
  };
  const dayClick = (e) => {
    console.log("日期", e);
  };
</script>

<style
  lang="scss"
  scoped
></style>

API

属性名 类型 默认值 说明
show Boolean true 控制组件显示。默认为 true
year Number 当前年份 用于设置或接收当前年份,默认值为当前年份
month Number 当前月份 用于设置或接收当前月份,默认值为当前月份
title String 日历 用于设置显示标题文字
todayColor String 蓝色 用于设置显示当天日期的背景颜色,默认为蓝色
activeColor String 黄色 用于设置当前选中日期的背景颜色,默认为黄色
activeDay String 空字符串 用于设置当前选中日期,默认为空,格式为 YYYY/MM/DD,如 2025/1/1
showTitle Boolean true 控制组件是否显示标题。默认为 true,表示显示标题
showControl Boolean true 控制组件是否显示顶部控制。默认为 true
insert Boolean true 组件是否嵌入页面。默认为 true
showPast Boolean true 是否显示农历。默认为 true。仅支持农历1949-2100年转换
zIndex Number 9999 弹窗层级 (默认 9999)
radius String 15rpx 弹窗圆角 (默认 15rpx)
mask Boolean true 是否显示遮罩层。默认为 true
opacity Number 0.7 遮罩层透明度 (默认 0.7)
bgColor String #fff 弹窗背景颜色 (默认 #fff)
iconColor String #333 关闭按钮颜色 (默认 #333)

备注

绑定show字段时,vue3版本,双向绑定方式为 v-model:show='show';

vue2版本,双向绑定方式为 :show.sync='show';

也可自行处理 不使用双向绑定;

Events

事件名 类型 说明
monthClick Function 月份回调函数
dayClick Function 日期回调函数
yearClick Function 年份回调函数
change Function 弹窗模式滑动回调函数
close Function 弹窗模式关闭回调函数

说明

  1. 默认情况下,组件会显示当前年份和月份,点击月份可以切换月份,点击年份可以切换年份,点击日期可以切换日期。
  2. 如果需要显示指定生成年份和月份,可以在组件上绑定 year 和 month 属性
  3. 组件可左右滑动切换自动加载月份和年份
  4. 组件使用 scss 封装.请确保项目中已配置 scss 编译

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
zbz

2025-02-14

切换下个月,滚动条怎么到1号,回到当前月,自动滚动到当日

代码猫 2025-02-14

最新版本已经添加此功能

代码猫

2025-01-13

版本支持,需要自行尝试,我也不确定

代码猫 2025-01-13

有问题留言反馈,看到后修改

2025-02-13

切换下个月,滚动条怎么到1号,回到当前月,自动滚动到当日