Vue的日历显示获取

日历显示获取"/>

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()下标的寻找来进行输出,如果我们用于当前月则按照正常的写法就好,但是如果展示给用户则需要加1tempDate.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指向的是mounteddocument.onclick = () => {this.flag = false;}}},}});
</script>