目前 Element 官方并没有打算支持农历显示的意愿,见 issues/11502 和 issues/2471。

两种方法:

第一种方法:使用 ele-calendar,lunarcalendar 属性表示是否需要农历。

第二种方法:对 Calendar 组件进行自定义内容,具体方法如下:

1、自己写阳历转阴历的方法或引入别人写好的 JS 文件,如 中国农历(阴阳历)和西元阳历即公历互转 JavaScript 库

2、如果是引入上面的 JS 文件,我把它放在 src/assets/js 文件夹下,即位置为 src/assets/js/calendar.js,需要在 calendar.js 文件的最后一行添加 export default calendar; 。如果使用了ESLint,需要在 calendar.js 文件的第一行添加 /* eslint-disable */。

/* eslint-disable */

// calendar.js 的源代码

export default calendar;

3、在 Vue 中使用 Element 的 calendar 组件并自定义内容,date.day 为日历上每一天的日期(如 2020-01-04),需要什么样的格式就自定义方法(如 solarDate2lunar(solarDate))输出。

{{ solarDate2lunar(data.day) }}

import calendar from "@/assets/js/calendar.js";

export default {

name: "Index",

methods: {

solarDate2lunar(solarDate) {

var solar = solarDate.split("-");

var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);

return solar[1] + "-" + solar[2] + "\n" + lunar.IMonthCn + lunar.IDayCn;

}

}

};

4、最后的效果:

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐