<template>
    <div class="calendar-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="lunar-detail-date">
            {{lunarDetail.lunarYear.substring(0,2)}} -【{{lunarDetail.lunarYear.substring(2,3)}}】年{{lunarDetail.lunarMonth}}月{{lunarDetail.lunarDay}}
        </div>
        <div class="days_area">
            <div class="day week" v-for="week in weeks" :key="week">{{week}}</div>
            <div class="day day-list" @click="chooseThisDay(day.gregorian)" v-for="(day, index) in days" :key="index" :class="day.gregorian === today ? 'choose_day' : ''">
                <p>{{day.gregorian}}</p>
                <span>{{day.lunar}}</span>
            </div>
        </div>
        <div class="bottom-btn">
            <span @click="close">取消</span>
            <span @click="confirm">確定</span>
        </div>
    </div>
</template>

<script>
    import {sloarToLunar,getYearMonthDay} from "Scripts/computedLunarDate.js"
    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);
                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: getYearMonthDay(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) {
                if (day > 0) {
                    this.today = day;
                }
            },
            getBit (m, n) {
                return 29 + ((m >> n) & 1)
            },
            close(){
                this.$emit('close')
            },
            confirm(){
                this.$emit('getLunarDate',this.selectDate)
            }
        }
    }
</script>

<style lang="less" scoped>
    .calendar-main{
         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{
                 10%;
                height: 35px;
                line-height: 35px;
                text-align: center;
                cursor: pointer;
                &:hover{
                    color: dodgerblue;
                }
            }
            .date{
                 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{
                 14.28%;
                line-height: 27px;
                text-align: center;
                cursor: pointer;
                p{
                    margin: 0;
                    font-size: 12px;
                    line-height: 20px;
                }
                span{
                    font-size: 12px;
                }
            }
            .day-list{
                &: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;
                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;
                }
            }
        }
    }
</style>

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

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;
};
// 計算農歷年是否有閏月，參數為存儲農歷年的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];
}

總結

以上是生活随笔為你收集整理的vue农历日历的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。