更新记录

1.0.0（2025-12-16） 下载此版本

仅在微信小程序调试，其他端需自己调试，该组件依赖于lunar-javascript，需要下载lunar-javascript相关的node包

平台兼容性

uni-app(3.6.15)

HCNL-CNCalendar

该组件依赖于lunar-javascript包，需要下载该包

该包官网：lunar

npm i lunar-javascript

<template>
  <view class="content">
    <view class="button" @click="openSelect('lunar')">农历</view>
    <view class="button" @click="openSelect('solar')">阳历</view>
    <AppointmentCNCalendar
      :start-year="startYear"
      :end-year="endYear"
      ref="AppointmentCNCalendar"
      @confirmDate="confirmDate"
      @cancelDate="cancelDate"
    />
  </view>
</template>
<script>
import AppointmentCNCalendar from "@/components/AppointmentCNCalendar/index.vue";
export default {
  components: {
    AppointmentCNCalendar,
  },
  data() {
    return {
      // 日历起始年份
      startYear: 1950,
      // 日历结束年份
      endYear: 2100,
    };
  },
  onReady() {
  },
  methods: {
    openSelect(type) {
      this.$refs.AppointmentCNCalendar.switchCalendar(type);
      this.$refs.AppointmentCNCalendar.openPicker(true);
    },
    confirmDate(data) {
      console.log("确认选择的日期：", data);
      this.$refs.AppointmentCNCalendar.openPicker(false);
    },
    cancelDate() {
      console.log("取消选择日期");
      this.$refs.AppointmentCNCalendar.openPicker(false);
    },
  },
};
</script>
<style>
page {
  width: 100%;
  height: 100%;
}

.button {
  padding: 20rpx;
  margin: 20rpx;
  background-color: #8b5cf6;
  color: white;
  border-radius: 10rpx;
  text-align: center;
}
</style>