Vue的日历显示获取

分享Vue的日历显示获取,以及组件之间的通讯

这里我们用到了两个JS的插件
①Vue的引入
②日历农历的JS引入

 	<script src="./Vue.js"></script>
    <script src="./nong.js"></script>

通常我们正常的思路为画页面
CSS部分

.box {
        width: 350px;
        margin: 50px auto;
        text-align: center;
        position: relative;
    }

    .picker {
        width: 100%;

    }

    .picker_bottom {
        width: 100%;
        position: absolute;
        left: 0;
        top: 50px;
    }

    .picker_header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: black;
        color: goldenrod;
        display: flex;
    }

    .dateshow {
        flex: 6;
    }

    .prev,
    .next {
        flex: 2;
        cursor: pointer;
    }

    .item {
        width: 50px;
        height: 50px;
        float: left;
        background-color: black;
        color: goldenrod;
        line-height: 20px;
        cursor: pointer;
        font-size: 12px;
    }

    .item:hover {
        box-sizing: border-box;
        border: 1px dashed greenyellow;
    }

页面以及子组件的控件部分

 	<div class="box">
        <mydatepicker @getdays="getDays"></mydatepicker>
    </div>

这里我们用Vue的驱动将子组件的Dom生成到mydatepicker 中

<template id="datepicker">
    <div class="picker">
        <div class="picker_title">
            开始时间 <input @click.stop="showPicker" v-model="inputDays">
            <button @click="getcurrentinp">获取当前的时间</button>
        </div>
        <div class="picker_bottom" v-show="flag">
            <div class="picker_header">
             <!-- 这里的stop用于阻止冒泡的事件 -->
                <div class="prev" @click.stop="prevmouth">上</div>
                <div class="dateshow">{{timeshow}}</div>
                <div class="next" @click.stop="nextmouth">下</div>
            </div>
            <div class="picker_content">
                <!-- 上个月显示的天数 -->
                <div class="item" style="color:brown" v-for="i in prevList" @click="getYMD(-1,i)">
                    {{i}} <br>
                    <span>{{getlongli(i,-1)}}</span>
                </div>
                <!-- 这个月显示的天数 -->
                <div class="item" v-for="j in thismouthday" @click="getYMD(0,j)">
                    {{j}}<br>
                    <span>{{getlongli(j,0)}}</span>
                </div>
                <!-- 下个月显示的天数 -->
                <div class="item" style="color:gray" v-for="k in nextdays" @click="getYMD(1,k)">
                    {{k}}<br>
                    <span>{{getlongli(k,1)}}</span>
                </div>
            </div>
        </div>

    </div>
</template>

js部分

  //获取当前月有多少天,不要用箭头函数不然会指向windows
  //Date.prototype运用了原型继承的思想,自己找不到找原型对象
    Date.prototype.getCurrentMouthDays = function () {
        let tempDate = new Date("2000-01-01");
        tempDate.setFullYear(this.getFullYear());   
        tempDate.setMonth(this.getMonth() + 1);     //这里可能对于初学者来说有点绕,我简要的描述一下,正常的月份是1-12月,但是计算机并不是这么识别而是通过getMonth()下标的寻找来进行输出,如果我们用于当前月则按照正常的写法就好,但是如果展示给用户则需要加1
        tempDate.setDate(0);

        return tempDate.getDate();
    }

    //上个月有多少天
    Date.prototype.prevMouthDays = function () {
        let tempDate = new Date("2000-01-01");
        tempDate.setFullYear(this.getFullYear());
        tempDate.setMonth(this.getMonth());
        tempDate.setDate(0);

        return tempDate.getDate();
    }

    //获取当前时间的第一天是星期几
    Date.prototype.nextMouthDays = function () {
        let tempDate = new Date("2000-01-01");
        tempDate.setFullYear(this.getFullYear());
        tempDate.setMonth(this.getMonth());

        return tempDate.getDay(); //11月返回的是0，0代表周日
    }

    //时间的格式化
    Date.prototype.FormatDate = function (str) {
        var year = this.getFullYear();
        var mouth = this.getMonth() + 1;   //展示月份得加一
        var day = this.getDate();
        return str.replace("yyyy", year).replace("mm", mouth).replace("dd", day);
    }

    // 时间函数的封装测试
    // var data = new Date();
    // console.log(data.FormatDate("mmmm-yy-dd"));



    new Vue({
        el: ".box",
        data: {

        },
        methods: {
            getDays(item) {
                alert(item);
            }
        },

        components: {
            "mydatepicker": {
                template: "#datepicker",
                data() {
                    return {
                        flag: false,
                        date: new Date(),
                        prevList: [],
                        inputDays: "",
                    }
                },
                methods: {
                    //获取农历
                    getlongli(day, n) {
                        var year = this.date.getFullYear();
                        var mouth = this.date.getMonth() + 1 + n;
                        //GetLunarDay这里调用的函数则是调用js里面的方法
                        var str = GetLunarDay(year, mouth, day).split(" ")[1].substring(2, 4);
                        return str
                    }
                    ,
                    //组件通讯
                    getcurrentinp() {
                        this.$emit("getdays", this.inputDays)
                    },
                    getYMD(n, day) {
                        // 因为我用了上个月.这个月,下个月三个盒子来解决需求,这里的n就尤为的重要
                        var year = this.date.getFullYear();
                        var mouth = this.date.getMonth() + n;


                        var date = new Date("2000-01-01");
                        date.setFullYear(year);
                        date.setMonth(mouth);
                        date.setDate(day);

                        //设置时间
                        this.inputDays = date.FormatDate("yyyy-mm-dd");
                    },
                    showPicker() {
                        this.flag = true;
                    },
                    prevmouth() {
                        //减
                        this.date.setMonth(this.date.getMonth() - 1);
                        this.subeverydays();
                    },
                    nextmouth() {
                        //加
                        this.date.setMonth(this.date.getMonth() + 1);
                        this.subeverydays();
                    },
                    subeverydays() {
                        //这个月的天数
                        this.thismouthday = this.date.getCurrentMouthDays();

                        //这个月的时间渲染
                        this.timeshow = this.date.FormatDate("yyyy-mm");

                        //为下面计算上个月的格子有多少个
                        this.showDays = this.date.nextMouthDays() == 0 ? 7 : this.date.nextMouthDays();
                        this.prevList = [];
                        for (var i = this.date.prevMouthDays() - this.showDays + 2; i <= this.date.prevMouthDays(); i++) {
                            this.prevList.push(i);
                        }

                        //下一个月的天数  42个格子-当前天的格子
                        this.nextdays = 42 - this.date.getCurrentMouthDays() - this.showDays + 1;
                    }
                },
                created() {
                    //钩子函数，在渲染之前来访问数据并赋值
                    this.subeverydays();
                },
                mounted() {
                    //钩子函数，当页面加载完成后的生命周期,这里必须用箭头函数，因为箭头函数的指向上下文的关系，那么这里的this指向的是mounted
                    document.onclick = () => {
                        this.flag = false;
                    }
                }
            },
        }
    });
</script>