vue实现一个日历切换功能

1、显示星期几和对应日历

2、可以增减年份/月份

3、可以选中当前时间

效果图

<template><div class="date-pickers"><inputtype="text"placeholder="选择日期"@focus="trueDateBox":value="date"readonly/><transition name="fade"><div class="date-box" v-if="dateBoxFlag"><div class="day-select"><div><button @click="reduceYear">&laquo;</button><button @click="reduceMonth">&lt;</button></div><div><input type="text" :value="year"  disabled/>年<input type="text" :value="month" disabled/>月</div><div><button @click="addMonth">&gt;</button><button @click="addYear">&raquo;</button></div></div><div class="day-screen"><div><span v-for="week in week" :key="week">{{ week }}</span></div><div @click="selectDay"><span v-for="day in previousMonth" :key="day+100" class="previousMonth">{{ day }}</span><spanv-for="day in monthDay[month - 1]":key="day"v-bind:class="isActive(day)"class="currentMonth">{{ day }}</span><span v-for="day in nextMonth" :key="day+200" class="nextMonth">{{ day }}</span></div></div></div></transition></div>
</template><script>
export default {name: 'datePickers',data() {return {dateBoxFlag: false,year: 0,month: 0,day: 0,previousMonth: [],nextMonth: [],week: ['日', '一', '二', '三', '四', '五', '六'],monthDay: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]};},watch: {year: function(val) {let reg = /^[1-9]\d*$/g;if (!reg.test(val)) {let date = new Date();this.year = date.getFullYear();}if (val < 0) {this.year = 1;}if (val > 10000) {this.year = 10000;}this.dayScreen();},month: function(val) {let reg = /^[1-9]\d*$/g;if (!reg.test(val)) {let date = new Date();this.month = date.getMonth() + 1;}if (val < 1) {this.month = 1;}if (val > 12) {this.month = 12;}this.dayScreen();}},computed: {date() {if (this.year == 0 || this.month == 0 || this.day == 0) {return '';}//处理切换月份到当前月,日期是否大于最后一天var lastDay = new Date(this.year, this.month, 0).getDate();if (this.day > lastDay){this.day = lastDay;}return this.year + '-' + this.month + '-' + this.day;}},methods: {// 突出显示当前日期isActive(index) {if (index == this.day) {return {active: true};}},// 显示日期盒子并初始化trueDateBox() {if (this.date === '') {let date = new Date();this.year = date.getFullYear();this.handleMonthLastDay();this.month = date.getMonth() + 1;this.day = date.getDate();}this.dayScreen();this.dateBoxFlag = true;},// 增减年份addYear() {this.year++;this.handleMonthLastDay();},reduceYear() {this.year--;this.handleMonthLastDay();},// 处理二月最后一天handleMonthLastDay() {if (this.isLeapYear(this.year)) {this.monthDay[1] = 29;} else {this.monthDay[1] = 28;}},// 增减月份addMonth() {this.month++;if (this.month > 12) {this.month = 1;this.year++;}},reduceMonth() {this.month--;if (this.month < 1) {this.month = 12;this.year--;}},// 选择日期selectDay(e) {let targetClass = e.target.className;if (targetClass == 'previousMonth') {if (this.month == 1) {this.month = 12;this.year--;} else {this.month = this.month - 1;}this.day = parseInt(e.target.innerText);} else if (targetClass == 'nextMonth') {if (this.month == 12) {this.month = 1;this.year++;} else {this.month = this.month + 1;}this.day = parseInt(e.target.innerText);} else {this.day = parseInt(e.target.innerText);}this.dateBoxFlag = false;},// 日期显示dayScreen() {// 上一个月let firstDate = new Date(this.year, this.month - 1, 1);let firstWeek = firstDate.getDay(); //取当月的第一天是星期几let preMonthDay = null;if (this.month == 1) {preMonthDay = this.monthDay[11];} else {preMonthDay = this.monthDay[this.month - 2];}for (let i = 0; i < preMonthDay; i++) {this.previousMonth[i] = i + 1;}//上个月所有日期if (firstWeek == 0) {this.previousMonth = this.previousMonth.slice(-7);} else {this.previousMonth = this.previousMonth.slice(-firstWeek);}// 下一个月let endDate = new Date(this.year,this.month - 1,this.monthDay[this.month - 1]);let endWeek = endDate.getDay(); //取当月的最后一天是星期几let nextMonthDay = null;if (this.month == 12) {nextMonthDay = this.monthDay[0];} else {nextMonthDay = this.monthDay[this.month];}for (let i = 0; i < nextMonthDay; i++) {this.nextMonth[i] = i + 1;}//下个月所有日期if (endWeek == 6) {this.nextMonth = this.nextMonth.slice(0, 7);} else {this.nextMonth = this.nextMonth.slice(0, 6 - endWeek);}},// 判断是否是闰年isLeapYear(year) {return year % 100 == 0? year % 400 == 0? true: false: year % 4 == 0? true: false;}}
};
</script><style lang="less">
.date-pickers {width: 280px;padding: 5px;position: relative;> input {width: 50%;height: 20px;padding: 5px;}.fade-enter-active,.fade-leave-active {transition: all 0.5s;}.fade-enter,.fade-leave-active {opacity: 0;transform: translateY(-10px);}> div {width: 100%;border: 1px solid #eaeaea;border-radius: 5px;box-shadow: 2px 2px 2px #eee;background: white;position: absolute;top: 50px;left: 0px;z-index: 99;div.day-select {display: flex;padding: 5px 0;height: 30px;line-height: 30px;color: #888888;border-bottom: 1px solid #ccc;input,button {width: 50%;border: none;background: white;text-align: center;color: #888888;cursor: pointer;}> div:nth-child(1),> div:nth-child(3) {width: 20%;}> div:nth-child(2) {width: 60%;display: flex;justify-content: center;// input:hover {//   background: #eee;// }input:nth-child(1) {width: 50px;}input:nth-child(2) {width: 30px;}}}div.day-screen {> div {width: 280px;padding: 0 5px;display: flex;font-size: 14px;justify-content: flex-start;flex-wrap: wrap;span {width: 40px;height: 40px;text-align: center;line-height: 40px;border-bottom: 1px solid #ccc;}}> div:nth-child(1) {font-weight: bold;background: #f8f8f8;}> div:nth-child(2) {span {cursor: pointer;color: black;&:hover,&.active {background: #21a5ef;color: white;}}span.previousMonth,span.nextMonth {color: #888888;}}}}
}
</style>

vue实现一个日历切换功能相关推荐

[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
用vue 编写一个日历组件（非常详细-让日历简单起来）
相信有不少小伙伴和我一样一提到日历就脑壳疼,然后去网上搜索好用的日历组件,如element-ui什么的,但是日历毕竟是别人开发出来的, 和自己家ui设计出来的功能样式毕竟不能100%相似,所以这个时候 ...
vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model
①公众号:王酱酱记 ②记录跟着文档学习Vue的一些关键点,持续更新.感兴趣的小白建议关注一下 ③Vue当中有几个常见的指令,看看是怎么用的,强烈建议你自己在编辑器里打一遍,你就更明白Vue为什么是数据 ...
前端 vue 制作一个日历（一）
由于项目需求,需要做一个日历先上一个图吧此方法获取的天数是一个总的天数全部代码 <template><div id="wfcalendar">< ...
从 0 到 1 用 Vue 封装一个日历组件
写在前面双手奉上代码链接: 传送门 - ajun568(https://github.com/ajun568/vue-calendar),点击文末阅读原文直达双脚奉上最终效果图: 需求分析需求分 ...
利用html写一个日历,Vue写一个日历
基础回顾关于 Date API getFulleYear(); // 年 getMonth(); // 月, 0-11 getDate(); // 日,也就是几号 getDay(); // 星期几, ...
开发那点事（四）vue实现一个日历插件
开发背景产品给开发这个流程图找了两天插件,最后产品还是不满意,自己着手开始实现了, 最终效果整体思路 1 确定日期json数组 2 根据数组渲染到页面上 3 根据不同的status应用不同的cs ...
vue封装一个日历组件
图示封装的组件的代码如下 <template><div class="calendar"><div c ...

vue实现一个日历切换功能

vue实现一个日历切换功能相关推荐

最新文章

热门文章