目前 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))输出。 <template> <div class="index"> <el-calendar> <template slot="dateCell" slot-scope="{ date, data }"> <p style="white-space: pre-line;"> {{ solarDate2lunar(data.day) }} </p> </template> </el-calendar> </div> </template> <script> 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; } } }; </script> 4、最后的效果:
目前 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 */
。3、在 Vue 中使用 Element 的 calendar 组件并自定义内容,
date.day
为日历上每一天的日期(如2020-01-04
),需要什么样的格式就自定义方法(如solarDate2lunar(solarDate)
)输出。4、最后的效果:
