更新记录

1.0.0（2022-03-17） 下载此版本

公历/农历日期选择器发布，欢迎大家下载使用

平台兼容性

uni-app

其他

better-calendar

介绍

uniapp、vue2日历组件
支持农历和公历日期选择器，包含年、月、日选择，支持农历公历切换

软件架构

│
├── components                        
│   ├── better-calendar.js            # 日期选择器公共方法
│   └── index.vue                     # 日期选择器组件
├── pages                             # 示例
│   └── index                         
│       └── index.vue     
│   ├── ……                            # 其余文件是uniapp常规文件，不具体介绍了        

安装教程

1. 使用HbuilderX打开
2. 运行到指定平台
3. 可在DCloud下载插件：https://ext.dcloud.net.cn/plugin?id=7642

使用说明

1. components/better-calendar里是组件，可复制引用
2. 调用方式

    <better-calendar
      ref="betterCalendarRef"
      :showCalendar="showCalendar"
      @confirm="selectDate"
      @cancel="showCalendar = false"
    ></better-calendar>

import dayjs from "dayjs";
import BetterCalendar from "@/components/better-calendar";

components: { BetterCalendar },

data() {
  const INIT_DAY_TYPE = "solar";
  const INIT_DAY_TIMESTAMP = dayjs().valueOf();
  const INIT_DAY = dayjs().format("YYYY-MM-DD");
  return {
    showCalendar: false,
    date: {
      type: INIT_DAY_TYPE, // 类型
      timestamp: INIT_DAY_TIMESTAMP, // 时间戳
      solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
      lunarDate: "", // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
      lunarDateNumber: "", // 农历生日的数字写法（1999-12-25）
    },
  };
},

methods: {
  openBetterCalendar() {
    this.showCalendar = true;
  },
  async selectDate(e) {
    this.date = await {
      type: e.type,
      timestamp: dayjs(e.solarDate).valueOf(),
      solarDate: e.solarDate,
      lunarDate: e.lunarDate,
      lunarDateNumber: e.lunarDateNumber,
      isLeap: e.isLeap, // 一年里是否有闰月
    };
    this.showCalendar = false;
  },
},

3. 传入参数说明

4. 返回参数说明

鸣谢

本项目基于 https://ext.dcloud.net.cn/plugin?id=3806 优化，在此感谢！