Web前端之UniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar

已于 2024-09-12 12:46:15 修改
阅读量4.9k 收藏 13
点赞数 9
分类专栏： Web前端 JavaScript UniApp 文章标签： uni-app 前端 web web前端 JavaScript vue
于 2023-05-08 20:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51157081/article/details/130566134
版权

MENU

前言

1、经过各位大佬的实践，及本人积极修缮，本插件在此文章中停更代码。后续直接通过Gitee码云的方式更新版本，本文章还作为使用指导说明书，版本三将作为最终的使用说明指导，更详细说明请查看插件中的README.md文件

2、仓库下载完成后，把名为calendarConverter文件夹复制到uniApp的components文件夹中，然后引用即可。切记不可在项目中直接下载！需要在一个空的文件夹中下载，这个指令是克隆一个仓库对应的分支，所以不能再一次克隆一个仓库到自己的项目中(如果自己的项目已经初始化了仓库管理)

3、也可以通过代码农微信公众号回复uniApp日历转换获取源码下载地址

4、代码下载指令

git clone -b uni-app-calendar https://gitee.com/mssj200224/open-source-cases.git

效果图

图1

图2

版本一

前言

通过ref打开组件时，微信小程序的组件的生命周期不会被触发。无论是打开时或页面加载时，都不会触发生命周期，这也是uniApp的一个诟病。但是vue的组件生命周期可以被触发。
backData方法返回最终的数据，数据分别有年、月、日、时和分，这些数据是对象类型，对象中包含公历和农历的值。birthdayVal字段返回拼接后的显示数据值，根据公历或农历返回对应值。

第一步，git下载组件

仓库下载完成后会有一个名为select-calendar的文件夹，把此文件夹复制到uniApp的components文件夹中即可。不可在项目中直接下载哦！需要在一个空的文件夹中下载，这个指令是克隆一个仓库，所以不能再一次克隆一个仓库到自己的项目中。

git clone -b select-calendar https://gitee.com/mssj200224/open-resources.git

第二步，下载依赖包

此依赖包与项目的其他依赖包同级，不需要把包放到组件文件夹中。

npm install js-calendar-converter --save

或

cnpm install js-calendar-converter --S

第三步，使用
Html

<view class="open_calendar">
    <text>生辰</text>

    <input class="input" :value="birthdayVal" placeholder="请选择生辰..." disabled @click="clickCalendar" />
</view>

<select-calendar ref="refCalendar" @backData="backData"></select-calendar>

JavaScript

import selectCalendar from '@/components/select-calendar/index';

export default {
	components: { selectCalendar },
	data() {
		return {
			info: {}
		}
	},
	methods: {
		/**
         * 接收返回数据
         * @author mj <1283077926@qq.com>
         * @param {object} val { year, month, day, hour, min, birthdayVal }
         * @param {object} year 包括公历/农历
         * @param {object} month 包括公历/农历
         * @param {object} day 包括公历/农历
         * @param {object} hour 包括时间/时辰
         * @param {object} min 包括时间/时辰
         * @param {object} birthdayVal 拼接好的字符串/根据选择的公历或农历方式拼接
         * @return {undefined} undefined
         */
		backData(info) {
			this.info = info;
		},
        /**
         * 打开日期选择器
         * @author mj <1283077926@qq.com>
         * @return {undefined} undefined
         */
		clickCalendar() {
			// 第一个参数传递日期时间 new Date()
            // 第二和第三个参数是生成年份的范围 1900~2100
            // 初始化时参数可以为空
            
			let info = this.info,
				calendarType = info.calendarType,
				birthdayVal = info.birthdayVal,
				newD = undefined;

			if (calendarType === 'solar' && birthdayVal) {
				let num = birthdayVal.match(/\d+(\.\d+)?/g);

				newD = `${num[0]}-${num[1]}-${num[2]} ${num[3]}:${num[4]}:00`;
			} else if (calendarType === 'lunar' && birthdayVal) {
				let { year, month, day, hour, min } = info;

				newD = `${year.num}-${month.num}-${day.num} ${hour.num}:${min.num}:00`
			} else {
				newD = new Date();
			}

			this.$refs.refCalendar.openCalendar(new Date(newD), 2000, 2023);
		}
	}
}

版本二

前言

通过ref打开组件时，微信小程序的组件的生命周期不会被触发。无论是打开时或页面加载时，都不会触发生命周期，这也是uniApp的一个诟病。但是vue的组件生命周期可以被触发。
backData方法返回最终的数据，数据类型是一个对象，对象中存放所有需要的值。对象中包含公历和农历的所有数据值，其中calendarType、defaultValue、date或lunarDate是重要的回显字段，是回显不可能缺失的字段，具体详细的使用说明在README.md文件中。result字段返回拼接后的显示数据值，根据公历或农历返回对应值。

第一步，git下载组件

仓库下载完成后，把名为select-calendar-v2文件夹复制到uniApp的components文件夹中引用即可。切记不可在项目中直接下载！需要在一个空的文件夹中下载，这个指令是克隆一个仓库对应的分支，所以不能再一次克隆一个仓库到自己的项目中。

git clone -b select-calendar https://gitee.com/mssj200224/open-resources.git

第二步，下载依赖包

此依赖包与项目的其他依赖包同级，不需要把包放到组件文件夹中。

npm install js-calendar-converter --save

或

cnpm install js-calendar-converter --S

第三步，使用
Html

<view class="open_calendar">
	<text>生辰</text>
	<input class="input" :value="info.result" placeholder="请选择生辰..." disabled @click="clickCalendar" />
</view>

<select-calendar ref="refCalendar" @backData="backData"></select-calendar>

JavaScript

import selectCalendar from '@/components/select-calendar-v2/index';

export default {
	components: { selectCalendar },
	data() {
		return {
			info: {}
		}
	},
	methods: {
		/**
		 * 接收返回数据
		 * @author mj <1283077926@qq.com>
		 * @param {object} info {
		 *							$cdtitle: "19日",
		 *							$chou: 9,
		 *							$cmin: 51,
		 *							$cmtitle: "6月",
		 *							$cytitle: "2023年",
		 *							$gytitle: "2023癸卯年",
		 *							$gzhou: "巳",
		 *							$gzmin: "",
		 *							$lhou: "9巳",
		 *							$lmin: "51分",
		 *							Animal: "兔",
		 *							IDayCn: "初二",
		 *							IMonthCn: "五月",
		 *							Term: null,
		 *							astro: "双子座",
		 *							cDay: 19,
		 *							cMonth: 6,
		 *							cYear: 2023,
		 *							calendarType: "solar",
		 *							date: "2023-6-19",
		 *							defaultValue: (5)[23, 5, 18, 10, 51],
		 *							festival: null,
		 *							gzDay: "戊申",
		 *							gzMonth: "戊午",
		 *							gzYear: "癸卯",
		 *							id: "idd3160",
		 *							idh: "id_11",
		 *							idm: "id_52",
		 *							isLeap: false,
		 *							isTerm: false,
		 *							isToday: true,
		 *							lDay: 2,
		 *							lMonth: 5,
		 *							lYear: 2023,
		 *							lunarDate: "2023-5-2",
		 *							lunarFestival: null,
		 *							nWeek: 1,
		 *							ncWeek: "星期一",
		 *							result: "2023年6月19日9巳51分"
		 *						}
		 * 阳历: cYear、cMonth、cDay、$chou、$cmin
		 * 阴历: gzYear、IMonthCn、IDayCn、$gzhou、$gzmin(此字段为空，分钟没有特定的阴历，所以非要取可使用$cmin或$lmin)
		 * 中国年数字: lYear、lMonth、lDay、$lhou、$lmin
		 * calendarType: 类型 农历(lunar)或公历(solar)
		 * defaultValue: 下标 [0, 0, 0, 0, 0] 年[0] 月[1] 日[2] 时[3] 分[4]
		 * result: 根据类型拼接的最终结果字符串
		 * @return {undefined} undefined
		 */
		backData(info) {
			this.info = info;
		},
		/**
		 * 打开日期选择器
		 * @author mj <1283077926@qq.com>
		 * @return {undefined} undefined
		 */
		clickCalendar() {
			// 初始化时需要传递的值
			// 第一个参数info可以为空对象
			// 第二和第三个参数是生成年份的范围 1900~2100
			// 初始化时参数可以为空

			// 回显/编辑时传递的值
			// info对象必须有的字段
			// defaultValue: [0, 0, 0, 0, 0]
			// calendarType: 'solar'|'lunar'
			// date: '2023-6-19'(阳历日期)
			// lunarDate: '2023-5-2'(阴历日期)
			// result: '2023年6月19日12午10分'
			// 第二和第三个参数是生成年份的范围 1900~2100
			// 如果传第二和第三个参数，
			// 参数值必须在info对象中的date或lunarDate值的范围内

			let info = this.info;

			this.$refs.refCalendar.openCalendar(info, 2000, 2023);
		}
	}
}

版本三

前言

通过ref打开组件时，微信小程序组件的生命周期不会被触发。无论是打开时或页面加载时，都不会触发生命周期，这也是uniApp的一个诟病。但是vue的组件生命周期可以被触发。
backData方法返回最终的数据，数据类型是一个对象，对象中存放所有需要的值。对象中包含公历和农历的所有数据值，其中calendarType、defaultValue、date和lunarDate是重要的回显字段，缺一不可，具体详细的使用说明请在下载后的README.md文件中了解。result字段返回拼接后的显示数据值，根据公历或农历返回对应值。

第一步，git下载组件

仓库下载完成后，把名为select-calendar-v3文件夹复制到uniApp的components文件夹中，然后引用即可。切记不可在项目中直接下载！需要在一个空的文件夹中下载，这个指令是克隆一个仓库对应的分支，所以不能二次克隆一个仓库到自己的项目中(如果自己的项目已经初始化了其他仓库)。

git clone -b select-calendar https://gitee.com/mssj200224/open-resources.git

第二步，使用
Html

<view class="open_calendar">
	<text>生辰</text>
	<input class="input" :value="info.result" placeholder="请选择生辰..." disabled @click="clickCalendar" />
</view>

<select-calendar ref="refCalendar" @backData="backData"></select-calendar>

JavaScript

import selectCalendar from '@/components/select-calendar-v3/index';

export default {
	components: { selectCalendar },
	data() {
		return {
			info: {}
		}
	},
	methods: {
		/**
		 * 接收返回数据
		 * @author mj <1283077926@qq.com>
		 * @param {object} info {
		 *							$cdtitle: "19日",
		 *							$chou: 9,
		 *							$cmin: 51,
		 *							$cmtitle: "6月",
		 *							$cytitle: "2023年",
		 *							$gytitle: "2023癸卯年",
		 *							$gzhou: "巳",
		 *							$gzmin: "",
		 *							$lhou: "9巳",
		 *							$lmin: "51分",
		 *							Animal: "兔",
		 *							IDayCn: "初二",
		 *							IMonthCn: "五月",
		 *							Term: null,
		 *							astro: "双子座",
		 *							cDay: 19,
		 *							cMonth: 6,
		 *							cYear: 2023,
		 *							calendarType: "solar",
		 *							date: "2023-6-19",
		 *							defaultValue: (5)[23, 5, 18, 10, 51],
		 *							festival: null,
		 *							gzDay: "戊申",
		 *							gzMonth: "戊午",
		 *							gzYear: "癸卯",
		 *							id: "idd3160",
		 *							idh: "id_11",
		 *							idm: "id_52",
		 *							isLeap: false,
		 *							isTerm: false,
		 *							isToday: true,
		 *							lDay: 2,
		 *							lMonth: 5,
		 *							lYear: 2023,
		 *							lunarDate: "2023-5-2",
		 *							lunarFestival: null,
		 *							nWeek: 1,
		 *							ncWeek: "星期一",
		 *							result: "2023年6月19日9巳51分"
		 *						}
		 */
		 
		 /**	
		 * 阳历: cYear、cMonth、cDay、$chou、$cmin
		 * 阴历: gzYear、IMonthCn、IDayCn、$gzhou、$gzmin(此字段为空，分钟没有特定的阴历，所以非要取可使用$cmin或$lmin)
		 * 中国年数字: lYear、lMonth、lDay、$lhou、$lmin
		 * calendarType: 类型 农历(lunar)或公历(solar)
		 * defaultValue: 下标 [0, 0, 0, 0, 0] 年[0] 月[1] 日[2] 时[3] 分[4]
		 * result: 根据类型拼接的最终结果字符串
		 * @return {undefined} undefined
		 */
		backData(info) {
			this.info = info;
		},
		/**
		 * 打开日期选择器
		 * @author mj <1283077926@qq.com>
		 * @return {undefined} undefined
		 */
		clickCalendar() {
			// 初始化时需要传递的值
			// 第一个参数info可以为空对象
			// 第二和第三个参数是生成年份的范围 1900~2100
			// 初始化时参数可以为空

			// 回显/编辑时传递的值
			// info对象必须有的字段
			// defaultValue: [0, 0, 0, 0, 0]
			// calendarType: 'solar'|'lunar'
			// date: '2023-6-19'(阳历日期)
			// lunarDate: '2023-5-2'(阴历日期)
			// result: '2023年6月19日12午10分'
			// 第二和第三个参数是生成年份的范围 1900~2100
			// 如果传第二和第三个参数，
			// 参数值必须在info对象中的date或lunarDate值的范围内

			let info = this.info;

			this.$refs.refCalendar.openCalendar(info, 2000, 2023);
		}
	}
}

Style

.open_calendar {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90upx;
	line-height: 90upx;
}

.input {
	width: 390upx;
	margin-left: 12upx;
}

三个版本的样式一样。

总结

版本一

有兴趣的伙伴可以不通过ref打开组件，可以自己实现props传参的方式实现组件的开启与关闭功能。
数据回显需要一一对应，即后端需要存储info里面的num字段值。为了防止数据出现不统一的情况，最好把整个info都存储到后端，这样回显的时候也方便一点。

版本二

有兴趣的伙伴可以不通过ref打开组件，可以自己实现props传参的方式实现组件的开启与关闭功能。
数据回显需要一一对应，即后端需要存储info里面的calendarType、defaultValue、result、date或lunarDate字段，字段名和值需要一一对应。最严谨靠谱的做法是把整个info都存储到后端，这样回显的时候既方便，又稳妥。

版本三

版本三在下载使用上简单一点，不需要自己下载依赖，只需要下载组件即可。

js-calendar-converter插件的详细介绍

web前端之js-calendar-converter日历插件的使用、日期、转换、阳历、阴历、公历、农历、calendar

uniapp日历
qcc0716的博客
01-06 4013
<template> <view class="calendar-wrapper"> <view class="header" v-if="headerBar"> <view class="preWidth" @click="changeMonth('pre')"> <view class="pre" ></view> </view> <view&gt
js 万年历农历转阳历 方法_JS实现带阴历的日历功能详解
weixin_30117665的博客
01-14 1798
本文实例讲述了JS实现带阴历的日历功能。分享给大家供大家参考，具体如下：工作中要写一个带阴历的日历，自己调研了怎么做日历。一.表格行数问题既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天(日历上第1列是星期天)到星期六一共7列。要解决行数问题之前，还得先知道这个月的第1天是星期几，因为每个月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定...
uni-app 实现日历组件
ltc_Yan的博客
11-01 1479
实际开发场景中，涉及到用户签到数据需要展示日历及每天是否签到数据状态标识，下面为作者实际开发时使用的日历组件，其为去除掉实际业务代码后的通用代码。1、使用组件使用为 uview 库。2、时间格式化插件 dayjs。
基于uniapp的日期选择器
最新发布
Jane0129的博客
04-03 375
--------可封装组件,后期再完善--------
uni-app-日历组件
08-12
uni-app-日历组件
uniapp 原生js实现公历转农历
坐等夕阳落time的博客
05-24 2322
代码思路在下面这个博客，我这里只是记录一下我是怎么在uniapp里使用的 原生js实现公历转农历_xm2by的博客-CSDN博客_javascript 农历原生js实现公历转农历参考文献：[1] 1900年至2100年公历、农历互转Js代码https://blog.csdn.net/XuM222222/article/details/82022345 第一步 找到资料 点击我提供原文链接，滑倒最底下，点击github链接 第二步 复制生成lunar.js 全选赋值，然后放在你的uniapp项目
uniapp日历插件
qingdi1的博客
04-24 3277
【代码】uniapp日历插件。
微信小程序uniapp日历组件
08-10
微信小程序uniapp日历组件
微信小程序学习用demo：日历：公历农历转换，calendar-convert
03-29
(此图片来源于网络，如有侵权，请联系删除! )挺好 (此图片来源于网络，如有侵权，请联系删除! )  示例代码： [AppleScript] 纯文本查看 复制代码 ? 001 002 003 004 005 006 007 008 009 ...054
微信小程序农历阳历日期选择器选中日期同时获取对应农/阳历日期
12-05
总的来说，实现微信小程序中的农历阳历日期选择器，需要理解两种历法的基本原理，熟练掌握微信小程序的API，以及可能需要的日期转换算法。通过合理的设计和编程，可以让用户在享受便捷操作的同时，也能感受到中国...
swift日历、公历(阳历)、农历(阴历、老黄历)、佛历、道历，节假日、星座、儒略日
03-06
日历、公历(阳历)、农历(阴历、老黄历)、佛历、道历，节假日、星座、儒略日、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋凶煞宜忌、吉神(喜神_福神_财神_阳贵神_阴贵神)方位、胎神方位、冲煞、纳音、星宿...
Lunar-Solar-Calendar-Converter：公历（阳历）农历（阴历）转换，支持时间段从1900-2100如果需要更长的时间段，利用generate.htm生成的数据即可。支持各种编程语言C＃， java，Objective-C，php，Python，javascript（nodejs），CC ++，ruby，swift，golang等支持Mac，Windows，Android，WP多种平台
02-02
公历（阳历）农历（阴历）转换，支持时间段从1900-2100如果需要更长的时间段，利用generate.htm生成的数据即可。支持各种编程语言C＃，java，Objective-C，php，Python，javascript（nodejs），C / C ++，ruby，...
uniapp日历组件代码（样式有做修改，去掉农历）
02-18
uniapp日历组件代码（样式有做修改，去掉农历）
uniapp zjy-calendar日历，uni-calendar日历增强版
乾坤鸟的博客
07-10 4209
zjy-calendar日历是对uniapp uni-calendar日历的增强，支持圆点和文字自定义颜色。
uniapp-日历控件
qq_44161703的博客
07-11 2904
chooseDay：已经选中（有标识）的日期 格式：chooseDay：['2023-02-02'] 样式也可以自己定义。actDay：鼠标点击的日期有选中的样式（可以自定义） 这个里面是 只能选中一个日期。onDayClick：有回调函数（e）e.data 就是选中的日期。第五步：修改源码中的选中和标识的样式（找到相应的位置）第二步：导入相应的项目，会有相应的提示（路径）第三步：引入对应的位置-例如我引入的位置。第一步：打开uniapp的插件市场。第四步：上面的名称解释下。
uni-app 日历组件的实现
风清扬的专栏
04-08 1852
该组件实现了基本的日历布局和日期选择功能，并用 props 和 emit 方法实现了父子组件之间的数据传递。根据需要，可以对该组件进行进一步的定制和扩展。
uniapp----微信小程序 日历组件（周日历&& 月日历）【Vue3+ts+uView】
heavenz19的博客
09-18 5784
【代码】uniapp----微信小程序 日历组件（周日历&& 月日历）【Vue3+ts+uView】
uniapp 日历组件
m0_61672533的博客
01-06 2185
uniapp 日历组件
在uniapp使用日历组件的实现
2301_76379381的博客
05-08 843
2.导入之后，把uni_modules下的components下的uni_calendar复制粘贴到项目下的components目录。打开日历。3.把uni-section复制粘贴到项目下的components目录。1.使用hbuilders导入插件。
uniapp 日历显示节假日
05-29
要在 Uniapp 中显示节假日，可以使用第三方插件来实现，比如 `lunar-calendar` 插件。该插件可以根据指定日期获取农历信息、节假日信息等，并且可以自定义节假日名称。 使用该插件的步骤如下： 1. 安装 `lunar-calendar` 插件： ``` npm install lunar-calendar --save ``` 2. 在需要使用节假日信息的页面中引入插件： ``` import LunarCalendar from 'lunar-calendar'; ``` 3. 在需要显示节假日的日期上调用 `LunarCalendar.solar2lunar` 方法获取农历信息和节假日信息： ``` let lunarDate = LunarCalendar.solar2lunar(year, month, day); let holidayName = lunarDate.Term || lunarDate.lunarFestival || lunarDate.solarFestival || ''; ``` 其中，`year`、`month`、`day` 分别为需要获取信息的日期的年、月、日，`holidayName` 为获取到的节假日名称。 4. 在页面中显示节假日名称。 以上是使用 `lunar-calendar` 插件显示节假日的基本步骤，具体实现还需要根据项目的实际情况进行调整。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值