uniapp 万年历

大量代码来至这里

<template>
  <view class="calendar-main">
    <!-- 当前年月 -->
    <view class="choose_year">
      <view class="icon" @click="chooseYears(-1)"><<</view>
      <view class="icon" @click="chooseMonth(-1)"><</view>
      <view class="date">{{ year }}年{{ month.toString().padStart(2, '0') }}月</view>
      <view class="icon" @click="chooseMonth(1)">></view>
      <view class="icon" @click="chooseYears(1)">>></view>
    </view>
    <!-- 农历 -->
    <view class="lunar-detail-date">
      {{ lunarDetail.lunarYear.substring(0, 2) }} -【{{ lunarDetail.lunarYear.substring(2, 3) }}】年{{ lunarDetail.lunarMonth }}月{{ lunarDetail.lunarDay }}
    </view>

    <!-- 日历 -->
    <view class="days_area">
      <view class="day week" v-for="week in weeks" :key="week">{{ week }}</view>
      <view class="day" @click="chooseThisDay(day.gregorian)" v-for="(day, index) in days" :key="index" :class="day.gregorian === today ? 'choose_day' : ''">
        <text>{{ day.gregorian }}</text>
        <text>{{ day.lunar }}</text>
        <text>{{ day.dayGanzhi }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { sloarToLunar, getYearMonthDay, getDayGanzhi } from '@/computedLunarDate.js';

class Day {
  // 公历
  gregorian = '';

  // 农历
  lunar = '';

  dayGanzhi = '';

  constructor(gregorian, lunar, dayGanzhi) {
    this.gregorian = gregorian;
    this.lunar = lunar;
    this.dayGanzhi = dayGanzhi;
  }
}

export default {
  name: 'LunarCalendar',
  props: ['currentDate'],
  data() {
    return {
      year: 0,
      month: 0,
      today: 0,
      days: [],
      weeks: ['一', '二', '三', '四', '五', '六', '日'],
      todayDate: 0
    };
  },
  mounted() {
    this.todayDate = new Date().getDate();
    if (this.currentDate) {
      const now = new Date(this.currentDate);
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.today = now.getDate();
    } else {
      const now = new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.today = now.getDate();
    }
    this.getDays();
  },
  computed: {
    selectDate() {
      return `${this.year}-${this.month.toString().padStart(2, '0')}-${this.today}`;
    },
    lunarDetail() {
      return sloarToLunar(this.year, this.month.toString().padStart(2, '0'), this.today);
    }
  },
  methods: {
    // 获取当前月份所有公历日期及其农历日期
    getDays() {
      this.days = [];
      const time = new Date();
      time.setFullYear(this.year, this.month, 0);

      const firstDay = new Date(this.year, this.month - 1, 1); // 当月第一天
      const lastDay = new Date(this.year, this.month, 0); // 当月最后天

      // 获取星期中的第几天（0-6）(星期日-星期六)
      const weekIndex = firstDay.getDay() == 0 ? 7 : firstDay.getDay();
      for (let i = 1; i < weekIndex; i++) {
        this.days.push(new Day('', '', ''));
      }
      for (let i = 1; i <= time.getDate(); i++) {
        this.days.push(new Day(i, getYearMonthDay(this.year, this.month, i), getDayGanzhi(this.year, this.month, i)));
      }
    },
    // 改变年份
    chooseYears(state) {
      this.year += state;
      if (new Date().getFullYear() === this.year && new Date().getMonth() + 1 === this.month) {
        this.today = this.todayDate;
      } else {
        this.today = 0;
      }
      this.getDays();
    },
    // 改变月份
    chooseMonth(state) {
      this.month += state;
      if (new Date().getFullYear() === this.year && new Date().getMonth() + 1 === this.month) {
        this.today = this.todayDate;
      } else {
        this.today = 0;
      }
      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(day) {
      console.log(this.lunarDetail);
      if (day > 0) {
        this.today = day;
      }
    },
    getBit(m, n) {
      return 29 + ((m >> n) & 1);
    }
  }
};
</script>

<style lang="less" scoped>
.calendar-main {
   100vw;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  .choose_year {
    display: flex;
    .icon {
      padding: 0 8rpx;
    }
    .date {
      flex: 1;
      text-align: center;
    }
  }
  .lunar-detail-date {
    line-height: 15px;
    text-align: center;
    color: #ff6800;
  }
  .days_area {
    display: flex;
    flex-wrap: wrap;
    .day {
       14.28%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 20rpx;
      padding: 8rpx 0;
      &:hover {
        background-color: #87bdf3;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
      }
    }
    .week {
      background-color: #fff;
      color: #19233c;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
      margin: 0;
    }
    .choose_day {
      background-color: dodgerblue;
      color: #fff;
      font-weight: bold;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      text {
        color: #fff;
      }
    }
  }
  .bottom-btn {
    text-align: right;
    span {
      padding: 4px 8px;
      margin-right: 5px;
      cursor: pointer;
      border: 1px solid #999;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      &:hover {
        color: dodgerblue;
        border: 1px solid dodgerblue;
      }
    }
  }
}
</style>

computedLunarDate.js

// 天干地支怎么算 https://www.nongli.com/item5/bz/17105.html
// 计算日干支 http://www.yangyide.net/suanmingwhy/3757.html
let lunarYearArr = [
  0x0b557, //1949
  0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959
  0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969
  0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979
  0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989
  0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999
  0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009
  0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019
  0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029
  0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039
  0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049
  0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059
  0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069
  0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079
  0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089
  0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099
  0x0d520 //2100
];
let lunarMonth = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊']
let lunarDay = ['一', '二', '三', '四', '五', '六',
  '七', '八', '九', '十', '初', '廿'
]

let tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
let diZhiKey = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
let diZhi = ['子鼠', '丑牛', '寅虎', '卯兔', '辰龙', '巳蛇', '午马',
  '未羊', '申猴', '酉鸡', '戌狗', '亥猪'
];
const EvenMonth = '2,4,6,8,10,12'.split(',')
// 公历转农历函数
export const sloarToLunar = function(sy, sm, sd) {
  // 输入的月份减1处理
  sm -= 1;

  // 计算与公历基准的相差天数
  // Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
  let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
  let ly, lm, ld, lz;
  // 确定输出的农历年份
  for (let j = 0; j < lunarYearArr.length; j++) {
    daySpan -= lunarYearDays(lunarYearArr[j]);
    if (daySpan <= 0) {
      ly = 1949 + j;
      // 获取农历年份确定后的剩余天数
      daySpan += lunarYearDays(lunarYearArr[j]);
      break
    }
  }

  // 确定输出的农历月份
  for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) {
    daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k];
    if (daySpan <= 0) {
      // 有闰月时，月份的数组长度会变成13，因此，当闰月月份小于等于k时，lm不需要加1
      if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <= k) {
        if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) {
          lm = k;
        } else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) {
          lm = '闰' + k;
        } else {
          lm = k + 1;
        }
      } else {
        lm = k + 1;
      }
      // 获取农历月份确定后的剩余天数
      daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k];
      break
    }
  }

  // 确定输出农历哪一天
  ld = daySpan;

  // 将计算出来的农历月份转换成汉字月份，闰月需要在前面加上闰字
  if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof(lm) === 'string' && lm.indexOf('闰') > -1)) {
    lm = `闰${lunarMonth[/d/.exec(lm) - 1]}`
  } else {
    lm = lunarMonth[lm - 1];
  }

  // 将计算出来的农历年份转换为天干地支年
  ly = getTianGan(ly) + getDiZhi(ly);
  // 将计算出来的农历天数转换成汉字
  if (ld < 11) {
    ld = `${lunarDay[10]}${lunarDay[ld-1]}`
  } else if (ld > 10 && ld < 20) {
    ld = `${lunarDay[9]}${lunarDay[ld-11]}`
  } else if (ld === 20) {
    ld = `${lunarDay[1]}${lunarDay[9]}`
  } else if (ld > 20 && ld < 30) {
    ld = `${lunarDay[11]}${lunarDay[ld-21]}`
  } else if (ld === 30) {
    ld = `${lunarDay[2]}${lunarDay[9]}`
  }
  return {
    lunarYear: ly,
    lunarMonth: lm,
    lunarDay: ld,
    lunarShengXiao: lz
  }
};

// 公历day to 农历day
export const getYearMonthDay = function(sy, sm, sd) {
  // 输入的月份减1处理
  sm -= 1;

  // 计算与公历基准的相差天数
  // Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
  let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
  let ly, lm, ld, lz;
  // 确定输出的农历年份
  for (let j = 0; j < lunarYearArr.length; j++) {
    daySpan -= lunarYearDays(lunarYearArr[j]);
    if (daySpan <= 0) {
      ly = 1949 + j;
      // 获取农历年份确定后的剩余天数
      daySpan += lunarYearDays(lunarYearArr[j]);
      break
    }
  }

  // 确定输出的农历月份
  for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) {
    daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k];
    if (daySpan <= 0) {
      // 有闰月时，月份的数组长度会变成13，因此，当闰月月份小于等于k时，lm不需要加1
      if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <= k) {
        if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) {
          lm = k;
        } else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) {
          lm = '闰' + k;
        } else {
          lm = k + 1;
        }
      } else {
        lm = k + 1;
      }
      // 获取农历月份确定后的剩余天数
      daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k];
      break
    }
  }

  // 确定输出农历哪一天
  ld = daySpan;

  // 将计算出来的农历月份转换成汉字月份，闰月需要在前面加上闰字
  if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof(lm) === 'string' && lm.indexOf('闰') > -1)) {
    lm = `闰${lunarMonth[/d/.exec(lm) - 1]}`
  } else {
    lm = lunarMonth[lm - 1];
  }

  // 将计算出来的农历年份转换为天干地支年
  ly = getTianGan(ly) + getDiZhi(ly);
  // 将计算出来的农历天数转换成汉字
  if (ld < 11) {
    ld = `${lunarDay[10]}${lunarDay[ld-1]}`
  } else if (ld > 10 && ld < 20) {
    ld = `${lunarDay[9]}${lunarDay[ld-11]}`
  } else if (ld === 20) {
    ld = `${lunarDay[1]}${lunarDay[9]}`
  } else if (ld > 20 && ld < 30) {
    ld = `${lunarDay[11]}${lunarDay[ld-21]}`
  } else if (ld === 30) {
    ld = `${lunarDay[2]}${lunarDay[9]}`
  }
  return ld;
};

// 获取某年某月某日(公历)的日干支
// http://www.yangyide.net/suanmingwhy/3757.html
// https://wannianrili.51240.com/
export const getDayGanzhi = function(y, m, d) {
  y = y.toString().padStart(4, '0')

  const isEvenMonth = EvenMonth.includes(m.toString());
  const C = parseInt(y.substr(0, 2));

  y = parseInt(y.substr(2)) // 年份后两位

  if (m == 1 || m == 2) {
    y -= 1;
  }
  if (m == 1) m = 13
  if (m == 2) m = 14

  //C 是世纪数减一，y 是年份后两位（若为1月、2月则当前年份减一），M 是月份（若为1月、2月则分别按13、14来计算），d 是日数。奇数月i=0，偶数月i=6。

  // G = 4C + [C / 4] + 5y + [y / 4] + [3 * (M + 1) / 5] + d - 3

  let G = 4 * C + parseInt(C / 4) + 5 * y + parseInt(y / 4) + parseInt(3 * (m + 1) / 5) + d - 3;
  G = G % 10;
  if (G === 0) {
    G = tianGan.length
  }
  G = tianGan[G - 1]

  // Z = 8C + [C / 4] + 5y + [y / 4] + [3 * (M + 1) / 5] + d + 7 + i
  const i = isEvenMonth ? 6 : 0;
  let Z = 8 * C + parseInt(C / 4) + 5 * y + parseInt(y / 4) + parseInt(3 * (m + 1) / 5) + d + 7 + i;
  Z = Z % 12;
  if (Z === 0) Z = diZhiKey.length
  Z = diZhiKey[Z - 1];
  return G + Z
}

// 计算农历年是否有闰月，参数为存储农历年的16进制
// 农历年份信息用16进制存储，其中16进制的最后1位可以用于判断是否有闰月
function hasLeapMonth(ly) {
  // 获取16进制的最后1位，需要用到&与运算符
  if (ly & 0xf) {
    return ly & 0xf
  } else {
    return false
  }
}

// 如果有闰月，计算农历闰月天数，参数为存储农历年的16进制
// 农历年份信息用16进制存储，其中16进制的第1位（0x除外）可以用于表示闰月是大月还是小月
function leapMonthDays(ly) {
  if (hasLeapMonth(ly)) {
    // 获取16进制的第1位（0x除外）
    return (ly & 0xf0000) ? 30 : 29
  } else {
    return 0
  }
}

// 计算农历一年的总天数，参数为存储农历年的16进制
// 农历年份信息用16进制存储，其中16进制的第2-4位（0x除外）可以用于表示正常月是大月还是小月
function lunarYearDays(ly) {
  let totalDays = 0;

  // 获取正常月的天数，并累加
  // 获取16进制的第2-4位，需要用到>>移位运算符
  for (let i = 0x8000; i > 0x8; i >>= 1) {
    let monthDays = (ly & i) ? 30 : 29;
    totalDays += monthDays;
  }
  // 如果有闰月，需要把闰月的天数加上
  if (hasLeapMonth(ly)) {
    totalDays += leapMonthDays(ly);
  }

  return totalDays
}

// 获取农历每个月的天数
// 参数需传入16进制数值
function lunarYearMonths(ly) {
  let monthArr = [];

  // 获取正常月的天数，并添加到monthArr数组中
  // 获取16进制的第2-4位，需要用到>>移位运算符
  for (let i = 0x8000; i > 0x8; i >>= 1) {
    monthArr.push((ly & i) ? 30 : 29);
  }
  // 如果有闰月，需要把闰月的天数加上
  if (hasLeapMonth(ly)) {
    monthArr.splice(hasLeapMonth(ly), 0, leapMonthDays(ly));
  }

  return monthArr;
}

// 将农历年转换为天干，参数为农历年
function getTianGan(ly) {
  let tianGanKey = (ly - 3) % 10;
  if (tianGanKey === 0) tianGanKey = 10;
  return tianGan[tianGanKey - 1];
}

// 将农历年转换为地支，参数为农历年
function getDiZhi(ly) {
  let diZhiKey = (ly - 3) % 12;
  if (diZhiKey === 0) diZhiKey = 12;
  return diZhi[diZhiKey - 1];
}