ElementUI显示农历的日历

查看ElementUI官方文档,没有看到定义农历的属性
image.png

哪位大神知道,如何显示出农历,并且能把节日显示出来呢?
类似这种:
image.png

已解决 悬赏分:10 - 解决时间 2021-11-27 16:51
反对 0举报 0 收藏 0

回答1

最佳
  • @

    目前 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 文件的第一行添加 。

    
    
    // 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、最后的效果:
    日历

    支持 0 反对 0 举报
    2021-11-27 09:42