Vue日历组件将标准时间(阳历，公历)变成农历、阴历

最新推荐文章于 2024-05-06 09:44:33 发布
最新推荐文章于 2024-05-06 09:44:33 发布
阅读量624 收藏 2
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_strong_pig/article/details/132722104
版权

写日历功能的时候，比如使用ElementUI组件库得时候，里面的时间是只有标准时间得，将标准时间变成农历得方法如下。

1.安装农历组件库

2.引入阳历/阴历切换函数

3.使用此函数进行农历阴历得转换

函数需要传入3个参数年月日，这里我传入得是一个类似于"2023-01-01"得字符串，所以我用new Date给他转换成了时间，然后获取的三个参数代入。

这个得结果为

 

我这里只是想获得农历后两位那个渲染到日历中，所以这里我使用了字符串方法直接得到最后的二十六(廿六) 。

 最后的结果

Web阿成
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vuelunarcalendar一个中国农历vue组件
08-10
阴历的vue组件。 使用Moment.js进行日期操作
vue-lunar-fullcalendar:中国农历日历的全部日历
03-21
图片和演示 a vue component for lunar fullcalendar. Uses Moment.js for date operations. Increase the functions of Chinese lunar calendar, 24 solar terms and holidays 安装 npm install --save vue-lunar-full-calendar //main.js import LunarFullCalendar from "vue-lunar-full-calendar" ; Vue . use ( LunarFullCalendar ) ; 但是，您也可以导入独立组件以在本地添加或更复杂的安装。 // index.vue import { LunarFullCalendar } from "vue-lunar-full-
vue显示农历_ElementUI显示农历的日历
weixin_33828635的博客
01-14 771
目前 Element 官方并没有打算支持农历显示的意愿，见 issues/11502 和 issues/2471。两种方法：第一种方法：使用 ele-calendar，lunarcalendar 属性表示是否需要农历。第二种方法：对 Calendar 组件进行自定义内容，具体方法如下：1、自己写阳历转阴历的方法或引入别人写好的 JS 文件，如 中国农历(阴阳历)和西元阳历即公历互转 JavaScr...
算法系列之二十：计算中国农历（一）月建”问题，就解决了农历朔望月与公历月的对应关系，那就是冬至节气所在的朔望月就是农历的子月，所有日历星期算法都有一个前提，必须已知某一天的日历或星期确定天数 再依此推
二进制模----细微行动改变影响世界
11-24 1497
世界各国的日历都是以天为最小单位，但是关于年和月的算法却各不相同，大致可以分为三类： 阳历--以天文年作为日历的主要周期，例如：中国公历（格里历） 阴历--以天文月作为日历的主要周期，例如：伊斯兰历 阴阳历--以天文年和天文月作为日历的主要周期，例如：中国农历 我国古人很早就开始关注天象，定昼夜交替为“日”，月轮盈亏为“月”，寒暑交替为“年”，在总结日月变化规律的基础上制定了兼有阴历月和阳历年性质的历法，称为中国农历。本文将介绍中国农历的历法规则、天干地支（Heavenly Stems，Ea
vue 阳历农历切换选择组件
qq_62787048的博客
06-20 830
vue 阳历农历切换选择组件
vue通过chinese-lunar-calendar获取农历日期
weixin_45966674的博客
05-11 1237
如果直接用js写是非常麻烦的 好在有一款这样的第三方插件 chinese-lunar-calendar。getLunar返回的就是这样格式的一个对象 其中 dateStr就是大家需要的东西。这里可以看到 我们需要传对应的年月日时间去给getLunar函数做转换。我们先要在需要使用的组件中引入他的getLunar 日期转换函数。然后 在组件中可以使用这个函数做日期转换。例如 我这里定义一个这样的函数。
js实现日期农历与公历的互转
xi_nuo的博客
12-06 1728
使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol...
uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar
“代码农”微信公众号
05-08 2957
uniApp实现公农日历相互转换、公历、农历、阳历、阴历、calendar
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
yehaocheng520的博客
03-17 4503
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
基于vue2.0和elementUi的vue农历日期组件vue-jlunar-datepicker（插件）
一个懒惰前端的博客
08-07 1637
基于vue2.0和elementUi的vue农历日期组件vue-jlunar-datepicker（插件）
VUE时间戳转农历js文件
05-27
用户可下载当前文件之后，可以获取时间戳数据传进JS文件中的函数，函数处理完时间戳之后会返回当前对应的事件农历日期（中文形式），VUE时间戳转农历js文件
vue日历组件，支持农历以及假期展示，可以自定义可选择日期范围
07-30
vue日历组件，支持农历以及假期展示，可以自定义可选择日期范围 用法 <calendar @choiseDay="chosieDayCallBack" @close="showCalendar = false" :currectDays="dateParams" :showCalendar="showCalendar"></...
Vue3+Typescript日历组件
07-29
通过Vue3+TypeScript实现的日历组件，组件有显示阳历，阴历，星座，假期等等功能；
阴历的Vue组件。-JavaScript开发
05-26
您也可以将其用作太阳历（公历）vue-lunar-calendar农历的Vue组件。 使用Moment.js进行日期操作。 这是韩国的农历。 它与中国农历不同，您也可以将其用作太阳历（在线日历）。在线演示演示安装npm install vue-lunar...
VUE实现日历组件功能
08-31
本篇文章主要介绍了VUE实现日历组件功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
主要介绍了基于Vue2-Calendar改进的日历组件（含中文使用说明）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 559
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
最新发布
weixin_44656422的博客
05-06 124
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 794
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue日历自定义组件
08-29
我很抱歉，但是我无法直接通过引用内容查看具体的图片和代码。然而，根据你提供的引用信息，我可以告诉你关于vue日历自定义组件的一些信息。 根据引用，这个组件目录可以提供给你一些关于vue日历自定义组件的相关代码和文件。 根据引用，这个vue日历组件支持农历和假期展示，并且可以自定义可选择的日期范围。 根据引用，在组件中使用这个vue日历组件，你需要在main.js中引入它。组件默认情况下会显示一个自定义的左侧icon。某一个日期可以出现选中状态，也可以使用圆点模式来表示选中状态。你可以通过传递一个包含active属性的数组对象来自定义某一天的数据。 总的来说，这个vue日历自定义组件提供了一些可定制化的功能，包括农历展示、假期展示以及可选择日期范围等。你可以根据你的需求在组件中进行相应的配置和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue自定义日历组件](https://blog.csdn.net/weixin_38644883/article/details/88067612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue日历组件，支持农历以及假期展示，可以自定义可选择日期范围](https://download.csdn.net/download/qq_29597215/86267518)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web阿成

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值