ElementUI显示农历的日历

回答1

• 
  @aspasp

  目前 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