vue 农历日历

前景: 客户要求 后台管理系统 (element-UI) 能够填报 员工的 农历生日 !
试了 element 的 el-calendar 不是 很好用!
网上找到了此作者的笔记:
https://blog.csdn.net/qq_32109661/article/details/87794155,
借鉴的他的,现在 我把 根据需求 优化了一点点 后的 版本 分享给大家,
希望能帮助到你 ! 嘿嘿(^▽)
下面 我们进入正题:
1:因为可能 很多地方要用,我把它直接封装成一个组件(如下图):

2: 引入一个很关键的农历js,可自行百度,也可直接复制我下面分享的 !

3:效果图:

这里是dataPick.vue原码,可以直接拿着用,除了需要的数据处理那块,代码中我都有备注,你可自行修改:

<template>
  <div class="main">
    <div class="choose_year">
      <div class="icon" @click="chooseYears(-1)"><i class="el-icon-d-arrow-left"></i></div>
      <div class="icon" @click="chooseMonth(-1)"><i class="el-icon-arrow-left"></i></div>
      <div class="date">{
   {
   year}}.{
   {
   month.toString().padStart(2, '0')}}</div>
      <div class="icon" @click="chooseMonth(1)"><i class="el-icon-arrow-right"></i></div>
      <div class="icon" @click="chooseYears(1)"><i class="el-icon-d-arrow-right"></i></div>
    </div>
    <div class="days_area">
      <div class="day week" v-for="week in weeks" :key="week">{
   {
   week}}</div>
      <div class="day" @click="chooseThisDay(day)"
           v-for="(day, index) in days" :key="index" :class="day.gregorian === today ? 'choose_day' : ''">
        <p>{
   {
   day.gregorian}} </p>
        <span>{
   {
   day.IDayCn}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import calendar from '@/utils/calendar'
  export default {
   
    name: 'datePick',
    data () {
   
      return {
   
        year: 0,
        month: 0,
        today: 0,
        days: [],
        weeks: ['一', '二', '三', '四', '五', '六', '日']
      }
    },
    mounted () {
   
      const now = new Date()
      this.year = now.getFullYear()
      this.month = now.getMonth() + 1
      this.today = now.getDate()
      this.getDays()
    },
    methods: {
   
      getDays () {
    // 获取当前月份所有公历日期及其农历日期
        this.days = []
        const day = new Date()
        day.setFullYear(this.year, this.month - 1, 1) // 此处较之前调整，获取当月第一天
        const month = new Date()
        month.setFullYear(this.year, this.month, 0) // 此处较之前调整，获取当月
        for (let i = 1; i < day.getDay(); i++) {
    // 当月第一天距离所在周周一的空白占位
          this.days.push({
    gregorian: '', IDayCn: '', IMonthCn:'',lDay:'',lMonth:''})
        }
        for (let i = 1; i <= month.getDate(); i++) {
    // 获取当月天数填充日历
          let lunarCalendar = calendar.solar2lunar(this.year,this.month,i);
          this.days.push({
    
          //这里我只拿了我要的几个数据,你可以根据自己需要处理 ,lunarCalendar 数据很全
            gregorian: i,
            IDayCn: lunarCalendar.IDayCn,//初几等
            IMonthCn:lunarCalendar.IMonthCn,//正月等
            lDay:lunarCalendar.lDay,//农历日号
            lMonth:lunarCalendar.lMonth//农历月号
          })
        }
      },
      dateTransition(month,day){
   
        month = month >=10 ? month : '0'+ month;
        day = day >=10 ? day : '0'+day;
        return [month,day].join('');
      },
      chooseYears (state) {
    // 改变年份
        this.year += state
        this.today = 1
        this.getDays()
      },
      chooseMonth (state) {
    // 改变月份
        this.month += state
        this.today = 1
        if (this.month < 1) {
   
          this.month = 12
          this.chooseYears(-1)
        } else if (this.month > 12) {
   
          this.month = 1
          this.chooseYears(1)
        } else {
   
          this.getDays()
        }
      },
      //这里是我要的数据处理, 你用的时候可以根据自己需要做更改
      chooseThisDay (days) {
    // 选择某天
        if (days.gregorian > 0) {
   
          this.today = days.gregorian
        }
        let arr = this.dateTransition(days.lMonth,days.lDay);
        let {
   IDayCn,IMonthCn} = days
        let data  = {
   
          IDayCn , IMonthCn , arr
        }
        //把 处理好的数据 抛给父组件(即调用此组件的父组件)
        this.$emit('updateLunar', data);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main{
   
    .choose_year{
   
      display: flex;
      .icon{
   
        width: 10%;
        height: 8vh;
        line-height: 8vh;
        text-align: center;
      }
      .date{
   
        width: 60%;
        text-align: center;
        height: 8vh;
        line-height: 8vh;
        font-size: 1.2rem;
      }
    }
    .days_area{
   
      display: flex;
      flex-wrap: wrap;
      .day{
   
        width: 14.28%;
        text-align: center;
        padding: 1vh 0;
        margin-top: 1vh;
        p{
   
          margin: 0;
          font-size: 14px;
        }
        span{
   
          font-size: 14px;
        }
      }
      .week{
   
        background-color: dodgerblue;
        color: #fff;
        font-weight: bold;
        height: 6vh;
        line-height: 4vh;
        margin: 0;
      }
      .choose_day{
   
        background-color: dodgerblue;
        color: #fff;
        font-weight: bold;
      }
    }
  }
</style>

这里是calendar.js原码, 可以完完全全不做任何修改 直接使用 :

/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @Author  Jea杨(JJonline@JJonline.Cn)
* @Time    2014-7-21
* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
const calendar = {
   

  /**
    * 农历1900-2100的润大小信息表
    * @Array Of Property
    * @return Hex
    */
  lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
          0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
          0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
          0x06566,0x0d4a0,0x0ea50,0x16a95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7