uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar |
您所在的位置：网站首页 › 农历与阳历转换表 › uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar |
uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar
|
文章目录
前言效果图版本一版本二版本三style总结微信小程序查看效果关于js-calendar-converter插件的详细介绍
前言
直接使用版本三即可。 效果图
通过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 生辰javaScript import selectCalendar from '@/components/select-calendar/index'; export default { components: { selectCalendar }, data() { return { info: {} } }, methods: { /** * 接收返回数据 * @author mj * @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 * @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 生辰javaScript import selectCalendar from '@/components/select-calendar-v2/index'; export default { components: { selectCalendar }, data() { return { info: {} } }, methods: { /** * 接收返回数据 * @author mj * @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 * @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 生辰javaScript import selectCalendar from '@/components/select-calendar-v3/index'; export default { components: { selectCalendar }, data() { return { info: {} } }, methods: { /** * 接收返回数据 * @author mj * @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 * @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 |
【本文地址】
今日新闻 |
推荐新闻 |