vue农历日历

比眉伴天荒 2023-06-02 14:54 24阅读 0赞

<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{
        
            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;
                    cursor: pointer;
                    &:hover{
        
                        color: dodgerblue;
                    }
                }
                .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;
                    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>

转载于:https://www.cnblogs.com/holy-amy/p/11243869.html