Vue3 获取农历(阴历)日期,并封装日历展示组件

本文主要是介绍Vue3 获取农历(阴历)日期,并封装日历展示组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:哈喽,大家好,我是码喽的自我修养!今天给大家分享vue3项目中使用 chinese-lunar-calendar 插件获取农历(阴历)日期,并封装了日历展示组件!提供了具体的代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到带大家,欢迎收藏+关注 哦 💕 

🌈🌈文章目录

一、安装 chinese-lunar-calendar 插件

二、封装获取阴历函数

三、调用方法

四、封装日历展示小卡片 

效果如下👇

完整代码如下👇

一、安装 chinese-lunar-calendar 插件

npm install --save chinese-lunar-calendar

二、封装获取阴历函数

import {getLunar} from 'chinese-lunar-calendar'export function lunarDate(pDate){const year = pDate.getFullYear()const month = pDate.getMonth() +1const day = pDate.getDate()const result = getLunar(year,month,day)return result.dateStr
}

打印出来的 result 结果如下:

三、调用方法

const date = new Date()
const result = lunarDate(date)//十月廿十

如果不想封装函数,也可以直接在当前组件的onMounted生命周期中调用,就是代码的可复用性差了些,代码如下👇

<template><div><p>{{ lunarDay }}</p></div>
</template><script setup>
import { onMounted, ref } from "vue";
import { getLunar } from "chinese-lunar-calendar";const lunarDay = ref(""); // 农历日期onMounted(() => {// 初始化日历const date = new Date();const curYear = date.getFullYear(); // 当前年份const curMonth = date.getMonth() + 1; // 当前月份const curDay = date.getDate(); // 当前日期const lunarDate = getLunar(curYear, curMonth, curDay);lunarDay.value = lunarDate.dateStr;
});
</script>

四、封装日历展示小卡片 

上面代码即可实现获取农历(阴历)日期的功能,在此基础上加上样式和其他日期属性,就封装成了一个完整的日历展示组件

效果如下👇

完整代码如下👇
<template><div class="fix-box"><!-- 日历卡片 页面 --><div class="calendar-card"><div class="cal-top">{{ curYear }} 年 {{ curMonth }} 月</div><div class="cal-center">{{ curDay }}</div><div class="cal-footer"><p class="cal-footer-d">第 {{ dayOfYear }} 天 第 {{ weekOfYear }} 周</p><p class="cal-footer-w">{{ lunarDay }} {{ curWeek }}</p></div></div><p class="label d-elip">日历</p></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getLunar } from "chinese-lunar-calendar";const curYear = ref(""); // 当前年份
const curMonth = ref(""); // 当前月份
const curDay = ref(""); // 当前日期
const curWeek = ref(""); // 当前周
const lunarDay = ref(""); // 农历日期
const dayOfYear = ref(""); // 当前日期是一年中的第几天
const weekOfYear = ref(""); // 当前日期是一年的第几周onMounted(() => {// 初始化日历const date = new Date();curYear.value = date.getFullYear();curMonth.value = date.getMonth() + 1;curDay.value = date.getDate();const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];const day = date.getDay();curWeek.value = weekday[day];const lunarDate = getLunar(curYear.value, curMonth.value, curDay.value);lunarDay.value = lunarDate.dateStr;// 获取当前时间是当年的第几天dayOfYear.value = Math.floor((date - new Date(curYear.value, 0, 0)) / 86400000);// 获取当前时间是当年的第几周const start = new Date(curYear.value, 0, 1);weekOfYear.value = Math.ceil((((date - start) / 86400000) + start.getDay() + 1) / 7);
});
</script><style scoped lang="less">
.fix-box {position: relative;.calendar-card {//   width: 100%;//   height: 100%;width: 186px;height: 186px;font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Helvetica Neue,Helvetica, sans-serif;background: #fff;border-radius: 15px;overflow: hidden;transition: transform 0.3s ease;&:hover {transform: translateY(-3px);}.cal-top {font-size: 16px;color: #fff;line-height: 46px;height: 25%;background: rgba(239, 102, 99, 0.8);}.cal-center {font-size: 46px;font-weight: 600;line-height: 78px;height: 42%;}.cal-footer {height: 33%;.cal-footer-d {font-size: 14px;color: #999;}.cal-footer-w {font-size: 16px;}}}.label {position: absolute;bottom: -28px;left: 0;width: 100%;font-size: 14px;color: #fff;}.d-elip {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
}
</style>

该组件可以复用到vue3项目的首页、可视化大屏等等需要展示日期的地方,让页面内容页面更加丰富!

好了,本文就到这里吧,点个关注 再走嘛~

🚀 个人简介:某大型国企高级前端开发工程师,7年研发经验,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养❣️
📝 专    栏:常用组件库与实用工具

🌈 若有帮助,还请 关注➕点赞➕收藏  ,不行的话我再努努力💪💪💪

 更多专栏订阅推荐:

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化

这篇关于Vue3 获取农历(阴历)日期,并封装日历展示组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108582

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》:本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript