vue实现周日历切换效果
本文实例为大家分享了vue实现周日历切换效果的具体代码，供大家参考，具体内容如下
废话不多说，直接上干货，需要的朋友自取
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周日历</title>
<!-- 引入组件样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" >
</head>
<body>
<div id="app">
<!-- 上面的日历 -->
<div class="calendar">
<div class="arrow">
<i class="el-icon-arrow-left" @click="arrow('left')"></i>
<i class="el-icon-arrow-right" @click="arrow('right')"></i>
</div>
<el-calendar v-model="value" :range="dateRange"></el-calendar>
</div>
<!-- 下面的日历 -->
<div class="date">
<div class="arrow0">
<i class="el-icon-arrow-left" @click="weekPre"></i>
<i class="el-icon-arrow-right" @click="weekNext"></i>
</div>
<!-- 年份 月份 -->
<div class="month">
<p>{{ currentYear }}年{{ currentMonth }}月</p>
</div>
<!-- 星期 -->
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<!-- 日期 -->
<ul class="days">
<li @click="pick(day)" v-for="(day, index) in days" :key="index">
<!--本月-->
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
<span v-else>
<!--今天-->
<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
<span v-else>{{ day.getDate() }}</span>
</span>
</li>
</ul>
</div>
</div>
</body>
<!-- 引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
// 上
value: "",
endDate: "",
dateRange: [],
dateNum: 0,
// 下
currentYear: "", // 年份
currentMonth: "", // 月份
currentDay: "", // 日期
currentWeek: "", // 星期
days: [],
}
},
mounted () {
},
created () {
// 上面的日历
this.dateList(this.dateNum);
console.log(this.dateRange);
// 下面的日历
this.initData();
},
methods: {
// 上面的日历
// 获取当前时间的周一
getMonday(date) {
var day = date.getDay();
var deltaDay;
if (day == 0) {
deltaDay = 6;
} else {
deltaDay = day - 1;
}
var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);
monday.setHours(0);
monday.setMinutes(0);
monday.setSeconds(0);
return monday; //返回选定时间的周一的0时0分0秒
},
getDateNew(time) {
console.log(time);
let times = new Date(time);
let year = times.getFullYear();
let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1;
let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1;
return year + "-" + month + "-" + day;
},
dateList(delta) {
//将时间对象转换为时间戳并加几天后转换为时间对象
var DateNews = this.getMonday(
new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000)
);
let startDate = this.getDateNew(DateNews, delta);
this.endDate = this.getDateNew(
new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000)
);
this.dateRange = [startDate, this.endDate];
},
arrow(arrow) {
if (arrow == "left") {
this.dateNum--;
this.dateList(this.dateNum);
} else if (arrow == "right") {
this.dateNum++;
this.dateList(this.dateNum);
}
},
// 下面的日历
formatDate (year, month, day) {
const y = year
let m = month
if (m < 10) m = `0${m}`
let d = day
if (d < 10) d = `0${d}`
return `${y}-${m}-${d}`
},
initData (cur) {
let date = ''
if (cur) {
date = new Date(cur)
} else {
date = new Date()
}
this.currentDay = date.getDate() // 今日日期 几号
this.currentYear = date.getFullYear() // 当前年份
this.currentMonth = date.getMonth() + 1 // 当前月份
this.currentWeek = date.getDay() // 1...6,0 // 星期几
if (this.currentWeek === 0) {
this.currentWeek = 7
}
const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
this.days.length = 0
// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
/* eslint-disabled */
for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
const d = new Date(str)
d.setDate(d.getDate() - i)
// console.log(y:" + d.getDate())
this.days.push(d)
}
for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
const d = new Date(str)
d.setDate(d.getDate() + i)
this.days.push(d)
}
},
// 上个星期
weekPre () {
const d = this.days[0] // 如果当期日期是7号或者小于7号
d.setDate(d.getDate() - 7)
this.initData(d)
},
// 下个星期
weekNext () {
const d = this.days[6] // 如果当期日期是7号或者小于7号
d.setDate(d.getDate() + 7)
this.initData(d)
},
// 上一個月 传入当前年份和月份
pickPre (year, month) {
const d = new Date(this.formatDate(year, month, 1))
d.setDate(0)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 下一個月 传入当前年份和月份
pickNext (year, month) {
const d = new Date(this.formatDate(year, month, 1))
d.setDate(35)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 当前选择日期
pick (date) {
alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
},
},
})
</script>
<style lang="scss">
#app {
width: 40%;
margin: auto;
}
ul {
padding: 0;
}
li {
list-style-type: none;
}
/* 上面的日历 */
.calendar {
position: relative;
width: 100%;
background: #fff;
margin-top: 20px;
margin-left: 20px;
}
.el-calendar__header {
display: block;
}
.el-calendar-table .el-calendar-day {
height: auto;
text-align: center;
}
.el-calendar-table td.is-selected {
background-color: #24b18d;
color: #fff;
}
.el-calendar-table .el-calendar-day:hover {
background-color: #24b18d;
color: #fff;
}
.el-calendar-table {
border-bottom: 1px solid #e4e4e4;
padding-bottom: 15px;
}
.el-calendar-table .next {
color: rgb(143, 143, 143);
}
.el-calendar__title,.el-calendar__button-group {
text-align: center;
}
.arrow {
width: 100%;
max-height: 46px;
position: absolute;
top: 15px;
text-align: center;
}
.arrow i {
font-size: 20px;
cursor: pointer;
}
.arrow i:nth-child(1) {
margin-right: 10%;
text-align: left;
}
.arrow i:nth-child(2) {
margin-left: 10%;
text-align: right;
}
/* 下面的日历 */
.date {
position: relative;
margin-top: 20px;
padding: 10px 20px;
background-color: #D3D3D3;
}
.arrow0 {
width: 100%;
max-height: 46px;
position: absolute;
top: 27px;
left: 0px;
text-align: center;
}
.arrow0 i {
font-size: 20px;
cursor: pointer;
}
.arrow0 i:nth-child(1) {
margin-right: 10%;
text-align: left;
}
.arrow0 i:nth-child(2) {
margin-left: 10%;
text-align: right;
}
.month {
text-align: center;
}
.weekdays {
display: flex;
}
.weekdays li {
flex: 1;
text-align: center;
}
.days {
display: flex;
}
.days li {
flex: 1;
text-align: center;
cursor: pointer;
}
.days li span {
display: inline-block;
width: 22px;
height: 22px;
}
.days li span:hover {
color: #fff;
background-color: #409EFF;
border-radius: 50%;
}
.active {
display: inline-block;
color: #fff;
border-radius: 50%;
background-color: #fa6854!important;
}
.other-month {
color: #e4393c;
}
</style>
</html>
第二种日历的实现方式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于Vue实现支持按周切换的日历
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换,具体内容如下 <template> <div class="date"> <!-- 年份 月份 --> <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div> <!-- 星期 --> <ul class=&q
-
vue-week-picker实现支持按周切换的日历
本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码,供大家参考,具体内容如下 vue-week-picker 安装 npm install vue-week-picker --save-dev DEMO 原生:线上DEMO 与element-ui结合使用:线上DEMO 功能 自适应式按周切换 与DatePicker日期选择器使用 结合Element-ui使用 效果 与vue-element结合组件,请转到链接 使用 <VueWeekPicker @dateValue=
-
vue实现周日历切换效果
本文实例为大家分享了vue实现周日历切换效果的具体代码,供大家参考,具体内容如下 废话不多说,直接上干货,需要的朋友自取 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
-
vue实现tab栏切换效果
本文实例为大家分享了vue实现tab栏切换效果的具体代码,供大家参考,具体内容如下 一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 <template> <div class="container"> <tabs default-active="2" class="build-tabs" > <tab-pane
-
Vue.js实现tab切换效果
Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里
-
Vue实现简单图片切换效果
本文实例为大家分享了Vue实现简单图片切换的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>
-
vue滚动tab跟随切换效果
分享一个我前几天做的移动端 tab滚动跟随的例子 随着滚动条的滚动,tab会对应进行切换 首先我们需要监听当前页面的滚动 mounted(){ //记录每个内容对用的dom数组 this.arrDom = document.getElementsByClassName("item-content"); window.addEventListener('scroll', this.handleScroll); }, destroyed(){ window.removeEventListe
-
vue实现签到日历效果
本文实例为大家分享了vue实现签到日历效果的具体代码,供大家参考,具体内容如下 先看看我们的效果图: 一.页面部分: <template> <div class="test-page"> <div class="top"> <div class="button" v-if="!sign" @click="Sign"> &
-
Vue.js实现微信过渡动画左右切换效果
前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 //app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-
-
Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果
废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi
-
Vue 页面切换效果之 BubbleTransition(推荐)
CodePen 地址 前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏.因为所有资源都需要重新加载. 今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的. 步骤 点击菜单,生成 Bubble,开始执行入场动画 页面跳转 执行退场动画 函数式调用组件 我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件.我通常会用
-
Vue实现内部组件轮播切换效果的示例代码
对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了.所以我们可以手动简单地写一个,满足需求即可. 现在一步步来实现这个功能,先写一个实现基本切换的demo. 1. 实现切换 先用vue-cli搭建一个工程脚手架,使用以下命令: npm install