基于vue.js element

vue.js element"/>

基于vue.js element

基于vue element-ui 的日历控件核心代码
效果图:

<div class="calendar"><!-- 年份 月份 --><div class="month"><div class="currentdate"><span class="choose-year">{{ currentYear }}年</span><span class="choose-month">{{ currentMonth }}月</span></div><div class="choose"><span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span><span @click="pickPre(currentYear,currentMonth)">❮</span><span @click="pickNext(currentYear,currentMonth)">❯</span></div><div class="clearfix"></div></div><!-- 星期 --><div class="caldate"><ul class="weekdays"><li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li>周六</li><li>周日</li></ul><!-- 日期 --><ul class="days"><!-- v-for循环 每一次循环用<li>标签创建一天 --><li v-for="dayobject in days"><template><!-- 非当前月份 --><div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">{{ dayobject.day.getDate() }}</div><!-- 当前月 --><div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth"><span class="datenumber">{{ dayobject.day.getDate()}}</span><template><template v-for="obj in leftobj"><template v-if="new Date(obj.orderDate).getDate() === dayobject.day.getDate()"><template v-if="obj.number > obj.reservations"><div class="usual"><p>{{obj.number}}</p><p>{{obj.reservations}}</p></div></template><template v-else><div class="fulled"><p>{{obj.number}}</p><p>{{obj.reservations}}</p><p>高亮</p></div></template></template></template><button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button></template></div></template></li></ul></div></div>

 <script>new Vue({el: '#app',data:{today:new Date(),//当前日期currentDay: 1,currentMonth: 1,currentYear: 1970,currentWeek: 1,days: [], //用于装载日历展示的日期leftobj: []//用于装载页面显示的月份已经进行预约设置的数据},created: function () {//在vue初始化时调用this.initData(null);},methods: {//初始化当前页要展示的日期initData: function (cur) {var date;var num;     //展示页中日期的数目//控制预定设置相对于当前日期延后的数var index = 2;var today = new Date();this.today = new Date(this.formatDate(today.getFullYear(),today.getMonth()+1,today.getDate()+index));//定义正则表达式,表示大月var rep = /^(1|3|5|7|8|10|12)$/  ;if (cur) {date = new Date(cur);var monthIndex = date.getMonth()+1;if ((date.getDay()==0&&monthIndex!=2)||(date.getDay()==6&&rep.test(monthIndex))){num=42;}else if(date.getDay()==1&&monthIndex==2&&(date.getFullYear()/4!=0)){num=28;} else{num=35;}} else {var now = new Date();date = new Date(this.formatDate(now.getFullYear(), now.getMonth()+1, 1));var monthIndex = date.getMonth()+1;//通过判断计算出将本月所有天数全部展示的最小周数对应的天数if ((date.getDay()==0&&monthIndex!=2)||(date.getDay()==6&&rep.test(monthIndex))){//要展示全改年改月的所有天数,需要6周即42天(一号为星期天且月份不为2月或者一号为星期六且月数为31天的月)num=42;}else if(date.getDay()==1&&monthIndex==2&&(date.getFullYear()/4!=0)){//要展示全改年改月的所有天数,需要4周即28天(一号为星期一且改月为平年的2月)num=28;} else{//要展示全改年改月的所有天数,需要5周即35天(一号在星期六之前或则一号为星球六但月数为30天的月)num=35;}}this.currentDay = date.getDate();this.currentYear = date.getFullYear();this.currentMonth = date.getMonth() + 1;this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）//将星期天的index数替换成7,便于后面就算if (this.currentWeek == 0) {this.currentWeek = 7;}//格式化每个月的第一号var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);//清空days中的数据this.days=[];//将每个月一号所在的位置确定并且补全第一周不是本月的日期// (确定一号所在的位置就可以就算出其他所有日期的位置)for (var i = this.currentWeek - 1; i >= 0; i--) {//获得这个月第一天的日期var d = new Date(str);//获得日历展示中上个月的日期d.setDate(d.getDate() - i);//创建一个json对象存放日期var dayobject = {};//将得到的日期复制给对象的day属性dayobject.day = d;//将对象添加到days集合中this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用}//其他周for (var i = 1; i <= num - this.currentWeek; i++) {//获得这个月第一天的日期var d = new Date(str);//获得日历展示本月一号后以及下个月的日期d.setDate(d.getDate() + i);//创建一个json对象存放日期var dayobject = {};//dayobject   {day:date,index:2}//将得到的日期复制给对象的day属性dayobject.day = d;//将对象添加到days集合中this.days.push(dayobject);}// 根据当前月发送异步求情查询数据axios.post("/ordersetting/findAll.do?date="+this.currentYear+"-"+this.currentMonth).then((res)=>{if (res.data.flag){this.leftobj=res.data.data;} else{this.$message.error(res.data.message);}});},//切换到当前月份的一号goCurrentMonth: function (year, month) {//获得今天的日期,用于得到今天的年份与月份var d = new Date();this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));},//向前一个月pickPre: function (year, month) {// setDate(0); 上月最后一天// setDate(-1); 上月倒数第二天// setDate(dx) 参数dx为 上月最后一天的前后dx天var d = new Date(this.formatDate(year, month, 1));//将日期往前移动一天,用于得到上个月年份与月份d.setDate(0);//调用初始化日历的方法,并将日期设置为上个月的一号this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));},//向后一个月pickNext: function (year, month) {var d = new Date(this.formatDate(year, month, 1));//将日期往后移动31天,用于得到下个月年份与月份d.setDate(32);//获取指定天之后的日期//调用初始化日历的方法,并将日期设置为下个月的一号this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));},// 返回 类似 2016-01-02 格式的字符串formatDate: function (year, month, day) {var y = year;var m = month;if (m < 10) m = "0" + m;var d = day;if (d < 10) d = "0" + d;return y + "-" + m + "-" + d}}})</script>