vue显示农历_vue农历日历

{{year}}年{{month.toString().padStart(2, ‘0‘)}}月

{{lunarDetail.lunarYear.substring(0,2)}}-【{{lunarDetail.lunarYear.substring(2,3)}}】年{{lunarDetail.lunarMonth}}月{{lunarDetail.lunarDay}}

{{week}}

{{day.gregorian}}

{{day.lunar}}

取消

确定

import {sloarToLunar} from "Scripts/computedLunarDate.js"

export default {

name: ‘LunarCalendar‘,

props:[‘currentDate‘],

data () {

return {

year: 0,

month: 0,

today: 0,

days: [],

weeks: [‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘, ‘日‘],

}

},

mounted () {

console.log(this.currentDate,‘66666‘);

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);

for (let i = 0; i < time.getDay(); i++) {

this.days.push({gregorian: ‘‘, lunar: ‘‘})

}

for (let i = 1; i <= time.getDate(); i++) {

this.days.push({gregorian: i, lunar: this.getLunarDay(this.year, this.month, i)})

}

},

// 改变年份

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 (day) {

if (day > 0) {

this.today = day;

}

},

getLunarDay (solarYear, solarMonth, solarDay) {

const madd = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];

const tgString = ‘甲乙丙丁戊己庚辛壬癸‘;

const dzString = ‘子丑寅卯辰巳午未申酉戌亥‘;

const numString = ‘一二三四五六七八九十‘;

const monString = ‘正二三四五六七八九十冬腊‘;

const CalendarData = [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95]

if (!(solarYear < 1921 || solarYear > 2020)) {

solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;

const timeArr = [solarYear, solarMonth, solarDay];

let TheDate = (timeArr.length !== 3) ? new Date() : new Date(timeArr[0], timeArr[1], timeArr[2]);

let total, m, n, k;

let isEnd = false;

let theDateYear = TheDate.getFullYear();

total = (theDateYear - 1921) * 365 + Math.floor((theDateYear - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;

if (theDateYear % 4 === 0 && TheDate.getMonth() > 1) {

total++

}

for (m = 0; ; m++) {

k = (CalendarData[m] < 0xfff) ? 11 : 12;

for (n = k; n >= 0; n--) {

if (total <= this.getBit(CalendarData[m], n)) {

isEnd = true;

break

}

total = total - this.getBit(CalendarData[m], n)

}

if (isEnd) {

break

}

}

let cMonth, cDay , cYear;

// cYear = 1921 + m

cMonth = k - n + 1;

cDay = total;

if (k === 12) {

if (cMonth === Math.floor(CalendarData[m] / 0x10000) + 1) {

cMonth = 1 - cMonth

}

if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {

cMonth--

}

}

// let run = ‘‘

let cDayStr = numString.charAt(cDay - 1);

/* if (cMonth < 1) {

run = ‘(闰)‘

} */

if (cDay % 10 !== 0 || cDay === 10) {

cDayStr = numString.charAt((cDay - 1) % 10)

}

return cDay === 1 ? monString.charAt(cMonth - 1) + ‘月‘ : (cDay < 11 ? ‘初‘ : (cDay < 20 ? ‘十‘ : (cDay < 30 ? ‘廿‘ : ‘三十‘))) + cDayStr // tgString.charAt((cYear - 4) % 10) + dzString.charAt((cYear - 4) % 12) + ‘年 ‘ + run + monString.charAt(cMonth - 1) + ‘月‘ +

}

},

getBit (m, n) {

return 29 + ((m >> n) & 1)

},

close(){

this.$emit(‘close‘)

},

confirm(){

this.$emit(‘getLunarDate‘,this.selectDate)

}

}

}

.calendar-main{

width: 325px;

position: absolute;

left:0;

right: 0;

z-index: 99;

margin-top: 5px;

background-color: #fff;

box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

.choose_year{

display: flex;

.icon{

width: 10%;

height: 35px;

line-height: 35px;

text-align: center;

}

.date{

width: 60%;

text-align: center;

height: 35px;

line-height: 35px;

font-size: 14px;

}

}

.lunar-detail-date{

line-height: 15px;

text-align: center;

color: #FF6800;

}

.days_area{

display: flex;

flex-wrap: wrap;

.day{

width: 14.28%;

line-height: 27px;

text-align: center;

cursor: pointer;

&:hover{

background-color: #87bdf3;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

p{

margin: 0;

font-size: 12px;

line-height: 20px;

}

span{

font-size: 12px;

}

}

.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;

span{

color: #fff;

}

p{

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;

}

}

}

}

//调用的阳历转农历

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

],

lunarMonth = [‘正‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘, ‘七‘, ‘八‘, ‘九‘, ‘十‘, ‘冬‘, ‘腊‘],

lunarDay = [‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘, ‘七‘, ‘八‘, ‘九‘, ‘十‘, ‘初‘, ‘廿‘],

tianGan = [‘甲‘, ‘乙‘, ‘丙‘, ‘丁‘, ‘戊‘, ‘己‘, ‘庚‘, ‘辛‘, ‘壬‘, ‘癸‘],

diZhi = [‘子鼠‘, ‘丑牛‘, ‘寅虎‘, ‘卯兔‘, ‘辰龙‘, ‘巳蛇‘, ‘午马‘, ‘未羊‘, ‘申猴‘, ‘酉鸡‘, ‘戌狗‘, ‘亥猪‘];

// 公历转农历函数

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

}

};

// 计算农历年是否有闰月，参数为存储农历年的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];

}